el_table的this.$refs.MainTable.toggleRowSelection(row, true);事件会触发selection-change
当我们遇到需求:
在点击时el-table行时,同时选中el-table的多选框。
<el-table
border
ref="MainTable"
:height="'100%'"
:data="tableLeft"
@select="handleSelect"
@row-click="handleClick"
>
handleClick(row){
this.$refs.MainTable.toggleRowSelection(row, true);
},
在点击el-table行时,需求同时选中跟当前行人不同的申请单。比如点击当前人名叫小雪,那么同时选中el-table中小雪的所有不同申请单。
<el-table
border
ref="MainTable"
:height="'100%'"
:data="tableLeft"
@select="handleSelect"
@row-click="handleClick"
@selection-change="handleSelectionChange"
>
handleClick(row){
this.curRow = JSON.parse(JSON.stringify(row))
// hisIsOne:选中一个人是否选中其所有的申请单标识
if (this.hisIsOne === "0") {
let arr = [];
let requisitionId = this.curRow.requisitionId;
this.tableLeft.forEach((i) => {
if (i.patientSoid === this.curRow.patientSoid) {
arr.push(i);
}
});
if (arr.length > 0) {
arr.forEach((j) => {
if (j.requisitionId !== requisitionId) {
this.$refs.MainTable.toggleRowSelection(j, true);//①---多选框选中
}
});
}
}
},
// ①处就会触发这一行代码
handleSelectionChange(val){
//多选框做的事。。。。。。。
}
①处的代码因为是循环遍历,所以肯定会多次触发多选事件,那么如何拿到最后一次的多选事件呢(因为多选事件中,最后一次的事件获取的才是最终的)
此时就需要防抖
<el-table
border
ref="MainTable"
:height="'100%'"
:data="tableLeft"
@select="handleSelect"
@row-click="handleClick"
@selection-change="handleSelectionChange"
>
handleClick(row){
this.curRow = JSON.parse(JSON.stringify(row))
// hisIsOne:选中一个人是否选中其所有的申请单标识
if (this.hisIsOne === "0") {
let arr = [];
let requisitionId = this.curRow.requisitionId;
this.tableLeft.forEach((i) => {
if (i.patientSoid === this.curRow.patientSoid) {
arr.push(i);
}
});
if (arr.length > 0) {
arr.forEach((j) => {
if (j.requisitionId !== requisitionId) {
this.$refs.MainTable.toggleRowSelection(j, true);//①---多选框选中
}
});
}
}
},
// ①处就会触发这一行代码
handleSelectionChange(val){
//多选框做的事。。。。。。。
if (this.timerS) clearTimeout(this.timerS);
this.timerS = setTimeout(() => {
this.handleSelectFn(val, type);
},300);
}
beforeDestroy() {
this.timerS = null;
},
这种情况多用于:点击含有多选框的行,在某处显示当前行的患者信息(可能出现点击事件和多选事件冲突的情况)。那么我们在点击click事件中只做多选框的选中,在多选事件中,做传递数据的操作。