elementplus table多选禁用
时间: 2023-10-02 10:05:36 浏览: 51
ElementPlus 的表格组件提供了 `disabled` 属性来禁用整个表格,但是如果只需要禁用表格中的部分行,可以使用 `row-disabled` 属性来指定哪些行应该禁用。
例如,在多选表格中禁用部分行,可以在数据源中为需要禁用的行添加 `disabled` 属性:
```javascript
data: [
{ name: 'John', age: 22 },
{ name: 'Mary', age: 18, disabled: true },
{ name: 'Tom', age: 25 },
{ name: 'Jerry', age: 30, disabled: true },
]
```
然后在表格组件中使用 `row-disabled` 属性来指定哪些行应该禁用:
```html
<template>
<el-table :data="data" v-model="selection" :row-disabled="isDisabled">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
data: [
{ name: 'John', age: 22 },
{ name: 'Mary', age: 18, disabled: true },
{ name: 'Tom', age: 25 },
{ name: 'Jerry', age: 30, disabled: true },
],
selection: [],
};
},
methods: {
isDisabled(row) {
return row.disabled;
},
},
};
</script>
```
这样,表格中拥有 `disabled: true` 属性的行将被禁用,无法被选中。