vxe-table控制checkbox显示不显示
时间: 2023-07-30 22:10:14 浏览: 610
vxe-table 是一个基于 Vue.js 的表格组件库,可以方便地在 Vue.js 项目中使用。要控制 vxe-table 中的 checkbox 是否显示,需要在数据源中为每个行对象添加一个名为 `disabled` 的属性,值为 `true` 表示该行的 checkbox 不可用,值为 `false` 表示该行的 checkbox 可用。
例如,在数据源中添加 `disabled` 属性:
```js
[{
id: 1,
name: '张三',
age: 20,
disabled: true // checkbox 不可用
}, {
id: 2,
name: '李四',
age: 22,
disabled: false // checkbox 可用
}]
```
然后在表格中使用 `checkbox-config` 属性,设置显示 checkbox,并绑定数据源中的 `disabled` 属性,如下所示:
```html
<template>
<vxe-table
:data="tableData"
checkbox-config="{ checkField: 'checked', checkStrictly: true, disabled: row => row.disabled }"
>
<!-- 列定义 -->
</vxe-table>
</template>
```
其中,`checkField` 表示绑定行数据中的哪个属性来表示该行是否选中,`checkStrictly` 表示是否严格控制选中状态,`disabled` 表示绑定行数据中的哪个属性来表示该行的 checkbox 是否可用。在这里,我们将 `disabled` 属性绑定到了行对象的 `disabled` 属性上。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)