element-ui多选表格select事件

测试代码如下 

<el-table>
          ref="multipleTable"
          :data="list"
          @sort-change="sortChange"
          @select="testttt"
</el-table>

<el-button class="btn"
            type="primary"
            size="mini"
            @click="teseSelect(scope.row)">选择
</el-button>

methods: {
    testttt(){
      console.log('触发select事假');
    },
// 这里第三个参数控制是否触发select事件给个false测试一下
    teseSelect(rows) {
      console.log('调用toggleRowStatus方法,未触发select事假');
      this.$refs.multipleTable.toggleRowSelection(rows, true,false)
    },
}

首先看下element官网对于toggleRowSelection方法和select事件的描述

 

 由此可见触发toggleRowSelection方法必定会触发select事件

由于公司业务需求想要将两者分离开，所以我翻开了element的源码

toggleRowSelection(row, selected, emitChange = true) {
      const changed = toggleRowStatus(this.states.selection, row, selected);
      console.log(changed);
      if (changed) {
        const newSelection = (this.states.selection || []).slice();
        // 调用 API 修改选中值，不触发 select 事件
        if (emitChange) {
          this.table.$emit('select', newSelection, row);
        }
        this.table.$emit('selection-change', newSelection);
      }
    },

于是我坐了上面的案例发现可以阻断两者的联系打印结果如下

第一次是点击选框触发的打印，后面由btn调用的方法不会触发select事件 

感谢观看