elementUI el-table 使用 表格多选时,根据数据状态禁用部分行的选择框
在 Element UI 的 el-table
组件中,可以使用 selectable
属性来定义是否可选。你可以通过这个属性结合 row
对象来根据数据状态禁用部分行的选择框。
以下是一个示例代码:
<template>
<el-table
:data="tableData"
@select="handleSelect"
@select-all="handleSelectAll"
:selectable="rowSelectable"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// 数据对象
]
};
},
methods: {
rowSelectable(row, index) {
// 根据 row 的状态返回 true 或 false
// 例如,如果你想根据状态字段 status 来判断是否可选:
return row.status === 'active';
},
handleSelect(selection, row) {
// 处理选中事件
},
handleSelectAll(selection) {
// 处理全选事件
}
}
};
</script>
在这个示例中,rowSelectable
方法根据行数据的 status
字段决定该行是否可被选中。如果 status
是 active
,则该行的选择框可用,否则不可用。你可以根据实际的数据状态字段进行调整。
评论已关闭