ag-grid 中外部编辑数据同步修改table单元格数据，数据实时更新

最新推荐文章于 2025-06-20 17:08:16 发布

搬砖工KO水泥匠

最新推荐文章于 2025-06-20 17:08:16 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue ag-grid 文章标签： vue javascript

本文链接：https://blog.csdn.net/WangYC_/article/details/108336013

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

ag-grid

2 篇文章

订阅专栏

本文探讨了在ag-Grid中如何实现实时更新单元格数据的方法，避免了整个表格的重新渲染，从而提高了性能。通过使用API的refreshCells方法，可以有效地更新已筛选或过滤的表格中的特定单元格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ag-grid 中外部编辑数据同步修改table单元格数据

这里只探讨本人已经使用的一个方法

getTags(params).then(res => {
    console.log(res, '====添加标签')
    if (res.code === 200) {
        
        
        // 更新已经修改完成的数据 不在重新渲染dom 但是现在是渲染的整个数据 如果我们已经进行了筛选活动 这个操作会把我们的筛选条件都重置 不友好 所有修改为重新渲染单个单元格的
		// this.gridOptions.api.setRowData(this.gridOptions.rowData)
		// 更新单元格数据
        this.gridOptions.api.refreshCells(this.rowDetail.label_setting) // 更新单元格数据
        // 当然也可以使用 更新一整行单元格的工作 
		// this.gridOptions.api.setRowData(this.gridOptions.rowData[index])
        
        console.log(this.rowDetail.data, this.gridOptions)
        this.$message.success(this.ModalText + '成功')
    } else {
        this.$message.error(this.ModalText + '失败')
    }
}).catch(err => {
    console.log('添加标签失败', err)
    this.$message.error('添加标签失败')
})

参考地址

http://www.itxst.com/ag-grid/zqbavbvv.html 【中文教程博客】
https://www.ag-grid.com/javascript-grid-rendering-flow/ 【官方文档】