el-table selection多选框 实现 单选效果

1、首先把全选框给隐藏掉

el-table selection多选框 实现 单选效果_第1张图片

thead {
    .el-table-column--selection {
        .cell {
            display: none;
        }
  	}
}

2、在@selection-change绑定的函数里面操作:当多选时,去除全部选择,勾选最后一个选项

handleSelectionChange(val) {
     if (val.length > 1) {
         this.$refs.zdxxTab.clearSelection()
         this.$refs.zdxxTab.toggleRowSelection(val[val.length-1])
     }
     this.multipleSelection = val[val.length-1];
}

3、如果想点击一行的任意位置就勾选上,在@current-change绑定的函数里面操作

currentChange(val){
    this.$refs.zdxxTab.toggleRowSelection(val)
}

你可能感兴趣的:(el-table selection多选框 实现 单选效果)