vue element表格支持跨页多选并且反显选中
el-table自带属性:
设置reserce-selection为true,可支持跨页多选。
自行实现反显选中:
// 接口请求当页数据后进行选中操作
// 反显选中
this.$nextTick(() => {
this.toggleRowSelect = true; // 记录是否是反显选中操作,因为选中改变会触发@selection-change事件
// tableData当页数据 multipleSelection需要反显的数据(已经选中的)
this.$refs.table && this.tableData.forEach(row => {
let selectRow = this.multipleSelection.find(item => item.signalCode === row.signalCode);
// 注意:toggleRowSelection传的row一定是表格数据中的某一行数据
this.$refs.table.toggleRowSelection(row, selectRow ? true : false);
})
this.toggleRowSelect = false;
})
// @selection-change事件函数
handleSelectionChange(val) {
// 如果是反显选中操作 不做处理
if(this.toggleRowSelect) {
return;
}
this.multipleSelection = val;
},
至此完成
路漫漫其修远兮,吾将上下而求索!