AgGrid中使用自定义CellRenderer刷新单元格时出现闪烁问题

嘿，我之前也碰到过这个糟心的问题！用自定义单元格渲染器的时候，一刷新数据就闪一下，体验感特别差对吧？其实根源是AgGrid默认的刷新逻辑会把旧的渲染器组件直接销毁再重建，这就导致了刺眼的闪烁。给你两个核心解决办法，亲测有效：

1. 给自定义渲染器加上refresh方法，让AgGrid复用组件实例 #

你的CustomRenderer.vue默认是没实现AgGrid的刷新接口的，所以每次刷新都会被干掉重造。我们只需要给它加个refresh方法，告诉AgGrid“我自己能更新，别拆我！”

比如你的自定义渲染器可以改成这样：

<template>
  <!-- 这里是你原本的自定义渲染内容，比如带样式的品牌名称 -->
  <span class="custom-make-style">{{ currentData.make }}</span>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

// 用ref存当前数据，方便后续更新
const currentData = ref(props.data)

// 实现AgGrid要求的refresh方法
const refresh = (params) => {
  // 更新组件内部的行数据
  currentData.value = params.data
  // 返回true告诉AgGrid：我已经更新好了，不需要重建组件
  return true
}

// 把refresh方法暴露给AgGrid调用
defineExpose({
  refresh
})
</script>

这个方法的关键是返回true，只要返回true，AgGrid就会复用当前的组件实例，不会销毁重建，自然就没闪烁了。

2. 用AgGrid的API精准刷新，别全量替换rowData #

我猜你原本的convertPrice方法可能是直接替换整个rowData数组，比如这样：

const convertPrice = () => {
  // 这种全量替换的方式会触发所有单元格重建，不闪才怪
  rowData.value = rowData.value.map(item => ({
    ...item,
    price: item.price * 1.1 // 比如乘以汇率调整价格
  }))
}

换成AgGrid的API来局部更新，效率更高，也能彻底减少闪烁：

const convertPrice = () => {
  const gridApi = grid.value.api
  // 遍历所有行，直接更新price字段
  gridApi.forEachNode(node => {
    node.data.price = node.data.price * 1.1
    // 标记该行数据已变更
    node.setDataChanged()
  })
  // 只刷新需要更新的列：自定义渲染器所在的列（比如'make'）和price列
  gridApi.refreshCells({
    columns: ['make', 'price'],
    force: false // 因为我们已经实现了refresh方法，不需要强制重建
  })
}

这种方式只会更新指定的单元格，而且因为自定义渲染器能自己完成刷新，完全不会有闪烁的问题。

额外小优化（可选） #

如果还是有极其轻微的闪烁，可以在你的gridOptions里加上这个配置，让AgGrid的DOM布局更稳定：

const defaultOptions = ref({
  domLayout: 'autoHeight',
  suppressAnimationFrame: true // 禁用不必要的动画帧，进一步减少闪烁
})

这样改完之后，你再点Convert按钮，自定义渲染器的单元格应该就安安静静完成更新，再也不会闪来闪去啦！

备注：内容来源于stack exchange，提问作者gespinha