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

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值