使用element

您所在的位置：网站首页 › element网站快速成型工具 › 使用element

使用element

2023-05-09 01:49| 来源: 网络整理| 查看: 265

了解element-ui框架网站快速成型工具 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库官网地址下载框架

我们使用 npm 进行安装,打开我们vue的控制台输入以下命令开始安装element-ui框架

npm i element-ui -S

更多使用方法请去官网，打开官网，点击组件，可以看到具体使用步骤

在vue中引入

在vue的main.js中写入以下内容

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 在vue新建一个购物车组件

手动创建shoppingcart.vue文件,并在router/index.js中配置路由，导入vue文件效果图：创建组件

在element中选择可用的table组件

选择一个合适的table组件对其进行改造成购物车我选的table: 选择table

我们点击显示代码，我们对table组件中的template和script代码进行删减

template中代码:

删除

script中代码：

export default { data() { return { tableData: [ {date: '',name: '',address: ''} ], } }, methods: { handleDelete(index, row) { console.log(index, row); } }, } 购物车基本数据显示

script:

template:

购物车删除对商品总数和商品总价进行计算

使用forEach完成编码

template:

购物车删除

把计算商品总数和商品总价的加到之间

共 {{goodsList.length}}件商品，已选择 {{total_num}} 件合计： {{total_price}}元去结算

script:

export default { name: "testShopingCart", data(){ return{ goodsList:[ { goodsName:'iphone 8', price:5099,goodsimg:'https://pic.downk.cc/item/5e9ebeafc2a9a83be57a20bc.gif' }, { goodsName:'iphone xs', price:8699,goodsimg:'https://pic.downk.cc/item/5e9ebeafc2a9a83be57a20bc.gif' }, { goodsName:'iphone8 xr', price:6499,goodsimg:'https://pic.downk.cc/item/5e8dc215504f4bcb04480605.jpg' }, ], check_list:[], } }, methods:{ handleChange(value) { console.log(value); }, deleteRow(index, rows) { rows.splice(index, 1); }, handleSelectionChange (val) { this.check_list = val; }, }, computed:{ total_num : function () { let num = 0; this.check_list.forEach((item)=>{ num += item.buy_num }); return num }, total_price : function () { let sum_price = 0; this.check_list.forEach((item)=>{ sum_price += item.buy_num*item.price }); return sum_price } }, }

效果图：购物车效果图

最后

老子说过：学而不思则罔思而不学则殆

代码都是一些简单的代码，重要的是思路，思想只有不断地碰撞才能迸发出火花

我的代码其实并不完善，有许多可以改进的.

Last modified on 2020-04-22

【本文地址】

使用element

使用element

今日新闻

推荐新闻