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的多选列改为单选列啦~~✌️