Vue的element-ui组件的使用

话不多说直接上代码

<template>
    <div class="container-alyer">
        <el-container>
            <el-header>我是头部</el-header>
            <el-main>
                <h4 class="title">我的购物车</h4>
                <ul class=shopping_title>
                    <li>
                        <ol class="trade_name">
                            <el-checkbox :indeterminate="this.isIndeterminate" v-model="checked" @change="changeAllChecked">商品名称</el-checkbox>
                            <!-- <label for="">商品名称</label> -->
                        </ol>
                    </li>
                    <li>
                        <ol class="item_pricing">商品单价</ol>
                        <ol class="purchase_quantity">购买数量</ol>
                        <ol class="subTotal">小计</ol>
                        <ol class=" commodity_operation">商品操作</ol>  
                    </li>
                </ul>
                <ul class="shopping_content" v-for="(item,index) in goods" :key="index">                       
                    <li>
                        <ol class="trade_name" :id="item.id">
                            <el-checkbox-group v-model="checkedId" @change="changeInputChecked">
                                <el-checkbox :label="item.id">
                                    <img :src="item.imgUrl" alt="">
                                    <span class="text">{{item.title}}</span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </ol>
                    </li>
                    <li>
                        <ol class="item_pricing">{{item.item_pricing}}</ol>
                        <ol class="purchase_quantity"><el-input-number v-model="num[item.id]" size="mini" @change="handleChange(index)" :min="1" :max="1000" label="描述文字"></el-input-number></ol>
                        <!-- <ol class="subtotal">{{v_subtotal}}</ol>  -->
                        <ol class="subtotal">{{subtotal[item.id]}}</ol> 
                        <ol class="commodity_operation"><el-button type="danger"  size="mini" @click="remove(index)">删除</el-button></ol>   
                    </li>      
                </ul>
            </el-main>
                <div class="foot">结算:<span>{{!count == '' ? count : '0.00'}}</span></div>
        </el-container>

    </div>

</template>


<script>
import Storage from '../models/Storage.js'
export default {
    data() {
        return {
            checked: false,
            checkedId: [],
            isIndeterminate: false,     /*Element-ui checkbox 的不确定状态 变量*/
            num: [],
            subtotal: [],
            goods: [
                {id: 0,  title: '极米 （XGIMI ）Play特别版 投影机 投影仪 家用 便携（单手可握 侧投 HDR10解码哈曼卡顿音响内置电池',item_pricing: 2499},
                {id: 1,  title: '荣耀MagicBook 2019 14英寸轻薄窄边框笔记本电脑（AMD锐龙7 3700U 8G 512G FHD IPS 指纹解锁）冰河银',item_pricing: 4985},
                {id: 2,  title: '联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',item_pricing: 1299},
                {id: 3,  title: 'vivo x21 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',item_pricing: 6000},
            ]
        }
    },
     methods: {

         /*计算小计功能*/
        handleChange(id) {    
            console.log(this.subtotal[id])

            this.subtotal[id] = this.goods[id].item_pricing * this.num[id];     /*goods数组中的item_pricing(商品单价)值 * num数组的值 = 赋值goods数组中的subtotal(小计)*/
            // Storage.set('num',this.num);
            // Storage.set('goods',this.goods);
        },

        /*全选和不全选功能*/
        changeAllChecked() {

            if(this.checked) {
                for(let item in this.goods) {
                    // console.log(this.goods[item].id);
                    this.checkedId.push(this.goods[item].id) /*把数据goods.id 加入checked数组里 实现全选和全不选 注意要跟绑定 value 、 label 值一样 不然则无效*/
                }
            }else {
                this.checkedId = [];
            }
        },

        /*单选功能*/
        changeInputChecked(value) {
            let checkedCount = value.length; /*获得value值得长度*/
            // console.log(checkedCount,this.checkedId.length)

            /*判断checkedCount 大于 0 ADN checkedCount 恒等于 checkedId自定义添加数组长度 之后将长度赋值给isIndeterminate  从而现实 ELement-ui checkbox 的不确定状态*/
            this.isIndeterminate = checkedCount > 0 && checkedCount === this.checkedId.length; 
            this.checked = false

            /*判断 goods 数组中的长度 恒等 checkedId自定义添加数组长度 实现 全部勾选后将全选checkbox 的checked状态 改为 true*/
            if(this.goods.length === this.checkedId.length) {
                 /*注意！ 先要把 Element-ui checkbox 不确定状态模式 改为 false 才能改 checkbed的状态*/
                this.isIndeterminate = false;
                this.checked = true;
            }           
        },
        remove(index) {
            //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
            this.goods.splice(this.goods.indexOf(index),1);

        }
      
    },
    mounted() {
        /*初始化*/



        /*初始化小计值*/

        for(let item in this.goods) {
            this.subtotal.push(this.goods[item].item_pricing);
        }


        /*实现初始化计数器内的值*/
        for(let item in this.goods) {

            if(!this.num[item] == '') {  /*判断 num数组 是否为空*/

                this.num.push(this.num); /*将num数组里的值 重新赋值给自己*/
            }else {
                this.num[item] = 1  /*赋值初始化值*/
            }
        }
    },

    computed: {
                /*计算总价 实现思路: 利用 id 进行绑定*/
            count() {
                let sum = 0;
                for(let i = 0; i<this.checkedId.length; i++) {

                    let j = this.checkedId[i];   
                    sum += parseInt(this.goods[j].item_pricing * this.num[j]);
                }
                return sum;
        }
    }
}

</script>

<style>
* {padding: 0; margin: 0;}
ul li {list-style: none;}
.container-alyer .el-container .el-main {background-color: #FFF; width: 80vw; margin: 0 auto; text-align: left}
.container-alyer .el-container .el-main .title {background-color: #e6e6e6; text-align: left; padding: 10px 15px; border-bottom: 1px solid #ccc; margin: 5px 0;}
.container-alyer .el-container .el-main .shopping_title {height: 40px; padding-top: 10px;}
.container-alyer .el-container .el-main ul li {display: inline-block;}
.container-alyer .el-container .el-main ul li ol {display: inline-block; margin: 0 20px;}
.container-alyer .el-container .el-main ul li:nth-of-type(1) {float: left;}
.container-alyer .el-container .el-main .shooping_content .trade_name .text {font-size: 14px; width: 550px; height: 20px; overflow: hidden;  display: inline-block; margin-top: 5px;}
.container-alyer .el-container .el-main ul li:nth-child(2) {float: right;}
.container-alyer .el-container .el-main .shopping_content .subtotal {width: 50px; margin: 0 10px;}
.container-alyer .el-container .el-main .shopping_content li {margin: 15px 0; height: 30px;}
.container-alyer .el-container  .foot {width: 80vw; background-color: #e6e6e6; padding: 10px 15px;  width: 75vw; margin: 0 auto; text-align: right;}

.container-alyer .el-container .el-main ul .el-checkbox__inner {line-height: 0;}
.container-alyer .el-container .el-main .shoopping_content .el-checkbox__inner {margin-bottom: 10px; margin-right: 10px;}


/*修改Element-ui样式开始*/

/* 计数器样式 */
.purchase_quantity .el-input-number {width: 100px !important;}



/*修改Element-ui样式结束*/

</style>