关于el-table复选改单选的方法网上挺多的, 就不再赘述了, 贴一个相关方法的链接: 

https://blog.csdn.net/mqq_12/article/details/105817330

 

根据这个链接中的方法写完之后发现 @selection-change 事件中获取的数据不只是当前选中的, 还有上次选中数据

分别在 @select 和 @selection-change 里面把数据打印出来看一下

// @select 事件方法
singleSelect (selection, row) {
        console.log('触发清空事件');
        this.$refs.authTable.clearSelection()
        console.log('清空事件完成');
        if (selection.length === 0) return
        console.log('触发选中事件');
        this.$refs.authTable.toggleRowSelection(row, true)
        console.log('选中事件完成');
    }

// @selection-change 事件方法
selGroup (val) {
      console.log('选中的数据--------', val);

}

打印如下:

 

 

 

分析一下, 多选框再次点击的时候是会触发一次 @selection-change 事件的( 此时数据为2条 ), 但是不知道是事件优先级还是阻塞的问题, 这一次事件被放在 @select 后面去执行了, 也就是先执行完了 @select 事件 中的清空( 

this.$refs.authTable.clearSelection())方法,然后又执行了 this.$refs.authTable.toggleRowSelection(row, true) 方法把当前点击的数据选中

这个时候重点来了----之前阻塞的 @selection-change 事件执行了, 所以上面打印出来的数据就可以看出来, 最后获取到的数据是两条.

 

解决办法: 

// 改为异步执行
async singleSelect (selection, row) {
        console.log('触发清空事件');
        await this.$refs.authTable.clearSelection()
        console.log('清空事件完成');
        if (selection.length === 0) return
        console.log('触发选中事件');
        this.$refs.authTable.toggleRowSelection(row, true)
        console.log('选中事件完成');
    }

 

改为异步执行后打印数据为: 

 

 上面所说的被阻塞的事件在清空数据之后紧跟着执行了,  this.$refs.authTable.toggleRowSelection(row, true) 成了最后执行的方法, 这样获取到的数据就是正常的了.

至于为什么改为异步之后阻塞的方法会提前执行我也搞不清楚.

按我的理解, 点击其他复选框的时候应该先执行 @selection-change 事件, 然后 @select 里面清空数据, 再将最后一次点击的数据选中, 也就是这个样子

 

 

以上仅为个人分析, 文笔不好, 技术也菜, 如果有什么说的不对的地方还望大家多多指正~