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