1. 應(yīng)用場景
我們在使用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 = []
}
即：當(dāng)獲取到的行數(shù)大于1行時，將其置空蛆挫，當(dāng)作未選擇處理赃承。
方法2：通過css去除全選checkbox(推薦)
<style>
.single-select-table thead .el-table-column--selection .cell{
display: none;
}
</style>
為了不讓此樣式影響到系統(tǒng)中其他需要多選的表格妙黍，因此在表格上增加了一個.single-select-table樣式悴侵。
這樣，就成功地將table的多選列改為單選列啦~~??
