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事件中只做多选框的选中,在多选事件中,做传递数据的操作。