ElementUI 将table多选框改为单选框的解决办法

1. 应用场景

我们在使用ElementUI时，时常需要用到<el-table-column type="selection" />为表格增加一个多选列，那么，如何将其改为一个单选列呢？

2. 效果

CheckBox.gif

3. 解决方法

• HTML

<el-table ref="table" :data="tableData" class="single-select-table" @selection-change="handleSelectionChange">
    <el-table-column type="selection" />
    <!-- 其他列... -->
</el-table>

• JS

data(){
  multipleSelection:[]
},
methods:{
    // 表格勾选
    handleSelectionChange(val) {
        // 单选
        if (val.length > 1) {
            this.$refs.table.clearSelection()
            this.$refs.table.toggleRowSelection(val.pop())
        }
        this.multipleSelection = val
    }
}

4. 注意

使用此方法时，如果点击了全选的CheckBox，this.multipleSelection取到的值将会是所有的行

方法1：在获取时做如下判断：

if (this.multipleSelection.length > 1) {
    this.multipleSelection = []
}

即：当获取到的行数大于1行时，将其置空，当作未选择处理。

方法2：通过css去除全选checkbox(推荐)

<style>
    .single-select-table thead .el-table-column--selection .cell{
        display: none;
    }
</style>

为了不让此样式影响到系统中其他需要多选的表格，因此在表格上增加了一个.single-select-table样式。

这样，就成功地将table的多选列改为单选列啦~~✌️