ElementUI el-table 表格 行選擇框改為單選


實現方法

首先,表格加一列

<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 事件

例如:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM