前端|Vue实现复选框,批量操作前端|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); } }

【前端|Vue实现复选框,批量操作】补充: 实现全选的方法:
注意：这里需要给全选框绑定的事件应是改变事件，不能是点击事件，因为点击事件会在选择框改变前执行，即本来全选框为 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 = []; }}