Vue实现复选框,批量操作

你的名字 2021-03-14 03:18 688阅读 0赞

**声明 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=[];
                })
            },

**数据表格:**

<tbody id="c_Tbody">
                    <tr v-for="whiteCard in whiteCardList">
                        <td style="width: 100px;">
                        
                            <input id="checkbox" type="checkbox" v-model="whiteCard.Checked" @change="updateIds($event,whiteCard.CardSerialNo)"
                                   style="zoom: 40%;width: 50px"/>
                        </td>
                        <td>
                            {
       {whiteCard.CardSerialNo}}
                        </td>
                        <td>
                            {
       {whiteCard.CardNo}}
                        </td>
                        <td>
                            {
       {whiteCard.CardTypeName}}
                        </td>
                        <td>
                            {
       {whiteCard.CardStatusName}}
                        </td>
                    </tr>
                    </tbody>

**更新选择集合的方法：**

// 更新复选
            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 = [];
                }
    
            }