elementplus table多选禁用
时间: 2023-10-02 12:05:38 浏览: 383
Element Plus 的 Table 组件提供了 `disabled` 属性来禁用整个表格,但如果只想禁用某些行的多选框,可以使用 `row-key` 属性和 `disabled` 方法来实现。
首先,设置 `row-key` 属性来标识每一行的唯一键值:
```html
<el-table :data="tableData" :row-key="row => row.id">
...
</el-table>
```
然后,在 `el-table-column` 组件中使用 `type="selection"` 来显示多选框,同时在 `:disabled` 属性中使用一个方法来判断该行是否禁用:
```html
<el-table-column type="selection" :disabled="isRowDisabled" />
```
最后,在 Vue 组件中定义 `isRowDisabled` 方法来返回一个布尔值,表示该行是否禁用。例如,以下代码禁用 id 为 2 的行:
```js
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Bob Smith' },
],
};
},
methods: {
isRowDisabled(row) {
return row.id === 2;
},
},
};
```
这样,id 为 2 的行的多选框就会被禁用了。
阅读全文