vxe-table可编辑表格下拉框数据回显
时间: 2023-12-14 13:33:03 浏览: 326
vxe-table vue 表格解决方案
为了实现vxe-table可编辑表格下拉框数据回显,可以按照以下步骤进行操作:
1. 在表格中定义下拉框的选项列表,例如:
```javascript
{
field: 'status',
title: '状态', editRender: {
name: 'select',
options: [
{
label: '启用',
value: '1'
},
{
label: '禁用',
value: '0'
}
]
}
}
```
2. 在激活编辑时,将下拉框的选项列表赋值给下拉框组件,例如:
```javascript
methods: {
editActivedEve(params) {
if (params.column.editRender.name === 'select') {
params.column.editRender.options = [
{
label: '启用',
value: '1'
},
{
label: '禁用',
value: '0'
}
];
}
}
}
```
3. 在表格中定义下拉框的选项列表后,需要在激活编辑时对下拉框的选项进行赋值,可以通过监听`@edit-actived`事件来实现,例如:
```html
<vxe-grid ref="xGrid" border="default" height="400" @edit-actived="editActivedEve"></vxe-grid>
```
4. 当下拉框的选项列表赋值完成后,需要将下拉框的选项值与表格数据进行绑定,可以通过监听`@cell-change`事件来实现,例如:
```html
<vxe-grid ref="xGrid" border="default" height="400" @edit-actived="editActivedEve" @cell-change="cellChangeEve"></vxe-grid>
```
```javascript
methods: {
cellChangeEve(params) {
if (params.column.editRender.name === 'select') {
params.row[params.column.property] = params.cellValue;
}
}
}
```
阅读全文