奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > Element框架 >

ElementUI使用教程,使用表格组件实现购物车

时间:2017-12-13 17:29来源:原创 作者:admin
实现的是小米移动端的购物车交互,可全选和统计,更改单件商品可及时统计。 其中深入掌握了element.ui框架表格组件的数据传值,以及遍历。 选项卡功能掌握了方法的定义。 更改数量
实现的是小米移动端的购物车交互,可全选和统计,更改单件商品可及时统计。

其中深入掌握了element.ui框架表格组件的数据传值,以及遍历。

选项卡功能掌握了方法的定义。

更改数量可以掌握计数器组件的使用。

使用它实现完购物车后,发现此框架确实可以大大提高我们的开发效率,而且在程序的健壮性,和交互体验上都得到了大幅度提升。

以下是部分源码:

html

<el-table :data="cart_list" selection-change="handleSelectionChange" width="100%">
          <el-table-column type="selection"></el-table-column>
 
          <el-table-column label="商品名称" prop="goods_name"></el-table-column>
          <el-table-column label="购买数量">
                    <template slot-scope="scope"><div class="div_number">
                              <el-input-number :min="1" change="handleChange" size="mini" v-model="scope.row.buy_num"></el-input-number></div>
                    </template>
          </el-table-column>
          <el-table-column label="商品单价" prop="goods_price"></el-table-column>
 
</el-table>
<el-row>
          <el-col :span="8">
                    <span style="font-size:12px">共 {{cart_list.length}}件商品,已选择 {{total_num}} 件</span>
          </el-col>
          <el-col :span="16">
                    合计: {{total_price}}元
          <el-button type="primary">去结算</el-button>
</el-col>
 
</el-row>
js
import lockr from 'lockr'

	export default {
		data(){
			return  {
				cart_list : [],
				check_list:[]
			}
		},
		created(){
			this.init()
		},
		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.goods_price
				})
				return sum_price
			}
		},
		methods:{
			init:function () {
				this.cart_list = lockr.get('cart_list')
			},
			handleSelectionChange:function (val) {
				this.check_list = val
			},
			handleChange:function (val) {
				console.log(val)
			}
		}

	}


详细视频教程:
https://v.douyu.com/show/kJmbBMkKrPOM40XA

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-02 21:04