当你的复选框辛辛苦苦做好时 你亲爱的产品大大说要改成单选
快速方法
1.隐藏调全选按钮 通过display:none
注意加个单独样式 不然所有的勾选按钮都会被隐藏
.more_btn thead .el-table-column--selection .cell {display: none;}
这个方法好像不太好用了,没关系 还有第二个方案
首先html部分
<el-tableref="singleTable":data="tableData"highlight-current-row@selection-change="handleSelectionChangeOne":header-cell-class-name="cellClass"class="table"style="width: 100%">
js部分
cellClass(row) {console.log(row)if (row.columnIndex === 0) {return 'DisableSelection'}},
css部分
.table /deep/ .DisableSelection > .cell {display: none !important;}
2.接下来处理单选
利用change事件
handleSelectionChange (val) {if (val.length > 1) {this.$refs.multipleTable.clearSelection()this.$refs.multipleTable.toggleRowSelection(val.pop())}},
原理:当勾选的数组长度大于1的时候删除前面一项 保持最后选的一项存在
nice!!!!