实现多选:
el-table-column
,设type
属性为selection
即可。
<el-table :loading="page.loading"
class="w-full el-table--scrollable-y"
height="800"
border
:data="tableData"
@selection-change="handleSelectionChange"
@row-click="handleHighlightChangeTable"
ref="table"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column label="序号" type="index" width="70"
:index="(index) => index + 1 + (page.pageNum - 1) * page.pageSize"
/>
</el-table>
selection-change | 当选择项发生变化时会触发该事件 |
row-click | 当某一行被点击时会触发该事件 |
js:
handleSelectionChange(val) {
this.multipleSelection = val; // 已勾选的数据项,数组
},
handleHighlightChangeTable(row) {
if(!row.disabled){
this.$refs.table.toggleRowSelection(row);
}
},
toggleRowSelection用于多选表格,切换某一行的选中状态,使得点击行即可进行选择。