1、点击整行时触发的事件 @row-click
2、获取列表选中的数据一定要用@select-change,不能用@select,因为@select只有点每行前面的选框才会触发这个事件,而@select-change不管选择任意地方都能选中并且触发它,用来接收选中的数据。
3、handleSelectable 有些数据不能被选中,需要禁用
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
border
:header-cell-style="{'text-align':'center', 'background': '#f8f8f8', 'color': '#333', 'font-weight': '500'}"
:cell-style="{'text-align':'center'}"
highlight-current-row
@row-click="handleRowClick"
@select-change="handleSelectRow"
>
<el-table-column type="selection" width="55" :selectable="handleSelectable"></el-table-column>
<el-table-column prop="userName" label="用户名"></el-table-column>
<el-table-column prop="orgName" label="地区"></el-table-column>
<el-table-column prop="uid" label="uid"></el-table-column>
</el-table>
// 部分数据不能被选,选框禁用
handleSelectable (row, index) {
console.log(this.parentTableData, this.parentTableData.includes(row.uid), row.uid)
if (!this.parentTableData.includes(row.uid)) {
return true
}
},
// 部分数据不能被选,整行不能选中
handleRowClick (row) {
if (!this.parentTableData.includes(row.uid)) {
this.$refs.multipleTable.toggleRowSelection(row)
// 获取当前选中的数据
const _selectData = this.$refs.multipleTable.selection
this.handleSelectRow(_selectData)
}
},
handleSelectRow (row) {
this.tableSelectedRows = row
}