vueJs全选功能

思路：

通过多选框的true 或者false,判断这条订单是否被选中。多选框的的选中与否自带true  false，不用向后台数据额外插入字段来判断是否被选中。

HTML：

<ul>
                <li v-for="item in dataList" :key="item.id" >
                    <div class="inline-block" >
                        <Checkbox 
                            v-model="item.checked" 
                            @on-change="oneCheckFun(item.checked,item.id)"
                        ></Checkbox>
                    </div>                    
                    <img src="../../assets/goods/1.png" alt="商品图片" >
                     <span class="inline-block " >
                         {{item.goodsName}}
                     </span>
                     <span class="inline-block text-center red" >
                         {{item.price}}
                     </span>
                     <span class="inline-block text-center" >    
                         <Input v-model="item.number" >
                             <Button slot="prepend" @click="changeNumber(item, -1)" :disabled="item.number == 1" >-</Button>
                             <Button slot="append"  @click="changeNumber(item, 1)">+</Button>
                        </Input>
                     </span>
                     <span class="inline-block red text-center" >
                         {{ item.price*item.number }}
                     </span>
                     <span class="inline-block">
                         <Icon type="ios-trash" />
                     </span>                     
                </li>
            </ul>

 

js:

<script>
    export default 
    {
        data()
        {
            return{
                checkAll: false, //全选
                checkArr: [],     //选中的数组
                dataList: 
                [    
                    {    
                        id: 0,
                        goodsName: '0【七夕价】五谷磨房核桃芝麻黑豆粉',
                        price: 10,
                        number: 1
                    },
                    {    
                        id: 1,
                        goodsName: '1五谷磨坊杂粮乌粉黑芝麻早餐食品即食粉',
                        price: 10,
                        number: 2
                    },
                    {    
                        id: 2,
                        goodsName: '2美加净细嫩柔白防晒乳100ml50ml',
                        price:10,
                        number: 1
                    }                    
                ]
            }
        },
        computed:
        {
            total()
            {
                let total = 0;
                this.dataList.forEach( (item, index) => { 
                    if(item.checked)                    
                        total +=item.price * item.number;
                });
                return total;
            }
        },
        methods: 
        {
            //全选
            checkAllFun()
            {
                //如果全选值为true,向选中数组checkArr插入选中id
                if(this.checkAll)
                {
                    this.clearArr();
                    this.dataList.forEach( (item, index) => {
                        this.checkArr.push(item.id);
                        //给后台数据插入一个字段checked，主要用来控制订单的多选框，而不是用来判断是否选中。
                        this.$set(item, "checked", this.checkAll);
                    });
                }
                else
                {
                    this.clearArr();
                    this.dataList.forEach( (item, index) => {
                        this.$set(item, "checked", this.checkAll);
                    });
                }
                
            },
            //单选
            oneCheckFun(check,id)
            {                
                //如果单选，那就取消全选；
                this.checkAll = false;
                if(check)
                {
                    this.checkArr.push(id);
                    this.checkArr.length == this.dataList.length ? this.checkAll = true : this.checkAll = false;
                }
                else
                {
                    this.checkArr.splice(this.checkArr.indexOf(id), 1);
                }
            },
            //清空选中数组
            clearArr()
            {
                this.checkArr = [];
            },
            //修改商品数量
            changeNumber(obj, value)
            {
                if( value < 0 && obj.number > 1)
                {
                    --obj.number ;                    
                }
                else
                {
                    ++obj.number
                }
            }   
        }
    }
</script>