element plus表格selection多选框如何禁用
在 Element Plus 的表格组件中,如果你想要禁用多选框(即单个行的选择框),可以通过设置 Table
组件的 row-key
属性和使用 selectable
方法来实现。
selectable
方法是一个函数,它接收一个参数为当前行的数据对象,并需要返回一个布尔值,表示这一行的多选框是否可用。返回 false
即表示禁用该多选框。
以下是一个简单的示例代码:
<template>
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
:selectable="selectableCallback"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
name: '张三',
// 其他数据
},
// 其他行数据
]
};
},
methods: {
selectableCallback(row) {
// 这里可以根据你的逻辑判断是否禁用多选框
// 例如,禁用 id 为 1 的行的多选框
return row.id !== 1;
}
}
};
</script>
在这个示例中,我们定义了一个 selectableCallback
方法,它根据行数据中的 id
属性来决定多选框是否可用。如果 id
等于 1
,则该行的多选框将被禁用。你可以根据自己的业务需求调整这个方法中的逻辑。
评论已关闭