Vue实现复选框,批量操作

声明 selectIds 数组：

    data: {
        whiteCardList: [],
        selectIds: []
    },

获取列表的方法: 这里要给得到的数据列表添加一个checked(任意命名)为false的属性，在循环展示数据表格中给选择框绑定 v-model=“whiteCard .checked”，这样是为了每次页面数据重新加载时使选择框为未选中状态：

        // 获取列表的方法
        getWhiteCardList: function () {
            var _this = this;
            axios.post("http://127.0.0.1:8080/yunjie/MakeCard/SelectWhiteListCard", {
                Token: _this.token,
                Data: {
                    CardSerialNo: _this.cardSerialNo,
                    CardStatus: _this.cardStatus
                }
            }).then(function (response) {
                if (response.data.Result == 0) {
                    // alert("1");
                    _this.whiteCardList = response.data.Data;
                    if (_this.whiteCardList.length > 0){
                        for (var i = 0; i < _this.whiteCardList.length; i++){
                            _this.whiteCardList[i].Checked=false;
                        }
                    }
                } else {
                    alert(response.data.Msg);
                }
                // 数据重新加载后清空选择列表
                 _this.selectIds=[];
            })
        },

数据表格:

     
                
                    
                    
                        
                    
                    
                        {{whiteCard.CardSerialNo}}
                    
                    
                        {{whiteCard.CardNo}}
                    
                    
                        {{whiteCard.CardTypeName}}
                    
                    
                        {{whiteCard.CardStatusName}}
                    
                
                

更新选择集合的方法：

        // 更新复选
        updateIds: function ($event, CardNo) {
            // alert($event.target.checked);
            if ($event.target.checked) {
                // 如果为选中,加入selectIds
                this.selectIds.push(CardNo);
            } else {
                // 否则移除
                var idx1 = this.selectIds.indexOf(CardNo);
                this.selectIds.splice(idx1, 1);
            }
        }

补充: 实现全选的方法:
注意：这里需要给全选框绑定的事件应是改变事件，不能是点击事件，因为点击事件会在选择框改变前执行，即本来全选框为 false 未选中状态，我们点击全选框是需要把数据全选，即选装状态应当是 true，因此要用改变事件，即 @change=“selectAll” 才符合我们的需求。

       selectAll: function ($event) {
            // 如果全选框为选中状态
            if ($event.target.checked){
                if (this.whiteCardList.length > 0){
                    for (var i = 0; i < this.whiteCardList.length; i++){
                        this.whiteCardList[i].Checked=true;
                        this.selectIds.push(this.whiteCardList[i].CardNo)
                    }
                }
            }else {
                // 点击全选框为未选中状态,清空selectIds
                this.selectIds = [];
            }

        }