设置Avue的selection复选框某种状态下禁用
时间: 2023-11-08 19:05:45 浏览: 213
要在Avue的表格组件中针对某些行禁用复选框,你可以在数据源中为这些行添加一个disabled属性,并将其值设置为true。然后,在表格的列配置中,可以使用slot-scope来自定义渲染列,通过设置复选框的disabled属性为row.disabled来禁用这些行的复选框。
以下是一个示例代码:
```html
<avue-table :data="tableData" :columns="tableColumns" :selection="true">
<template slot-scope="{ row }" slot="selection">
<el-checkbox :disabled="row.disabled" v-model="row._checked"></el-checkbox>
</template>
</avue-table>
```
在数据源中添加一个disabled属性:
```js
tableData: [
{ name: 'John', age: 22 },
{ name: 'Mike', age: 30 },
{ name: 'Amy', age: 25, disabled: true } // 禁用复选框
]
```
在表格的列配置中,使用slot-scope自定义渲染列,并将复选框的disabled属性设置为row.disabled:
```js
tableColumns: [
{ type: 'selection', width: 60, align: 'center' },
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
]
```
这样就可以针对某些行禁用表格的复选框了。
阅读全文