實現方法
首先,表格加一列
<el-table-column type="selection" width="55"></el-table-column>
然后,隱藏掉標頭的全選全不選
thead .el-table-column--selection .cell{
display: none;
}
給表格加一個 ref
,例如:ref="Table"
(加在el-table的屬性里)
給表格加一個事件 @selection-change="chooseInstance"
chooseInstance (val) {
if (val.length > 1) {
this.$refs.Table.clearSelection()
this.$refs.Table.toggleRowSelection(val.pop())
} else {
}
},
如果要實現點擊表格的行就單選,再添一個 @current-change
事件:
在事件中:
currentChange(currentRow, oldCurrentRow) {
this.$refs.Table.toggleRowSelection(currentRow)
}
2020-01-12 更新
發現使用 @current-change
事件的時候,會出現點擊某一行選中之后,如果點擊前面的選擇框去掉選中,那么再次點擊當前行不會將選擇框勾選,原因是這時候當前行並沒有發生改變
所以,更好的方式是使用 @row-click
事件
例如: