如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中？
在使用 Element UI 的 Table 组件时，如果你想要禁用某一行的选中（特别是在多选模式下），可以通过自定义行的 selectable 属性来实现。selectable 属性接受一个布尔值或者一个返回布尔值的函数，用来控制某一行是否可以被选中。
下面是一个基本的示例，展示如何在 Element UI 的 Table 组件中禁用某一行的选中：
<template><el-table:data="tableData"@selection-change="handleSelectionChange"ref="multipleTable"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',disabled: false // 自定义属性，标记该行是否可以被选中}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',disabled: true // 自定义属性，标记该行不可以被选中}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',disabled: false}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',disabled: false}]};},methods: {// 控制行的选中状态handleSelectionChange(val) {this.multipleSelection = val;},// 禁用某一行的选中selectable(row, index) {return !row.disabled;}}
};
</script><!-- 需要在 el-table 上添加 :selectable 属性来应用禁用逻辑 -->
<template><el-table:data="tableData"@selection-change="handleSelectionChange":selectable="selectable"ref="multipleTable"style="width: 100%"><!-- ... 其他代码 ... --></el-table>
</template>
相关链接
- 官方文档
