vxe-table 表格如何实现禁用
时间: 2023-11-07 08:55:04 浏览: 1015
vxe-table 表格可以通过设置 column 的 `editRender` 属性来实现禁用。具体实现方式如下:
1. 在 column 中设置 `editRender` 属性,值为一个对象,对象中包含 `render` 方法和 `disabled` 属性。
```js
{
title: '姓名',
key: 'name',
editRender: {
// 渲染函数
render(h, {row, column}) {
return h('input', {
attrs: {
value: row[column.key]
},
on: {
input: event => {
row[column.key] = event.target.value
}
}
})
},
// 是否禁用
disabled({row}) {
return row.disabled
}
}
}
```
2. 在数据源中添加 `disabled` 属性,并设置为 `true` 或 `false` 即可禁用或启用该行数据。
```js
[
{
name: '张三',
age: 18,
address: '北京市海淀区',
disabled: true
},
{
name: '李四',
age: 20,
address: '上海市浦东新区',
disabled: false
}
]
```
这样,当 `disabled` 属性为 `true` 时,该行数据对应的单元格就会被禁用。
阅读全文