vxe-grid 单独更新新增的临时数据
时间: 2023-08-22 20:22:10 浏览: 116
vxe-grid加载页面默认表格选中第一行高亮.vue
对于 `vxe-grid` 组件,如果你想单独更新新增的临时数据,可以通过 `insertAt` 方法和 `remove` 方法来实现。具体操作可以参考下面的代码示例:
```javascript
// 假设你的表格数据如下
const tableData = [
{ id: 1, name: 'John', age: 18 },
{ id: 2, name: 'Amy', age: 20 },
{ id: 3, name: 'Bob', age: 22 }
]
// 新增一行数据
const newRow = { id: 4, name: 'Tom', age: 21 }
this.$refs.grid.insertAt(newRow, 0)
// 找到新增的临时数据的索引
const rowIndex = this.$refs.grid.getTableData().findIndex(item => item.id === newRow.id)
// 更新数据
this.$refs.grid.remove({ row: newRow })
this.$refs.grid.insertAt(Object.assign(this.$refs.grid.getInsertRecords()[rowIndex], updatedRow), rowIndex)
```
这样就可以单独更新新增的临时数据了。需要注意的是,新增的临时数据在插入到表格中后,会被存储在 `insertRecords` 数组中,因此我们需要通过 `getInsertRecords` 方法来获取这个数组,然后才能找到新增的临时数据的索引。同时,我们还需要先通过 `remove` 方法将新增的临时数据从表格中删除,再通过 `insertAt` 方法将更新后的数据重新插入到表格中。
阅读全文