在 AgGrid 中使用自定义 CellRenderer 刷新单元格会导致其闪烁

Question

我有以下 AgGrid，它有一个用于乘以价格列值的按钮，并且在第一列中有一个自定义单元格渲染器。

<template>
  <button @click="convertPrice()">Convert</button>
  <AgGridVue
    :rowData="rowData"
    :columnDefs="colDefs"
    :gridOptions="defaultOptions"
    style="height: 500px"
    class="ag-theme-quartz"
    ref="grid"
  />
</template>

<script setup>
import { ref } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";
import CustomRenderer from "./components/CustomRenderer.vue";

const grid = ref(null);
const rowData = ref([
  { make: "Tesla", model: "Model Y", price: 64950, electric: true },
  { make: "Ford", model: "F-Series", price: 33850, electric: false },
  { make: "Toyota", model: "Corolla", price: 29600, electric: false },
]);
const colDefs = ref([
  {
    colId: "make",
    cellRenderer: CustomRenderer,
    valueGetter: (params) => ({
      electric: params.data.electric,
      model: params.data.model,
    }),
  },
  { field: "model" },
  { field: "price" },
  { field: "electric" },
]);

let defaultOptions = {
  domLayout: "autoHeight",
  cellFlashDuration: 250,
  cellFadeDuration: 800,
  defaultColDef: {
    enableCellChangeFlash: true,
  },
};

function convertPrice() {
  const gridApi = grid.value.api;

  gridApi.forEachNode((row) => {
    row.data.price = row.data.price * 1.5;
    row.updateData(row.data);
  });
}
</script>

工作示例

如果按网格上方的“转换”按钮，

price

和

make

列都会闪烁，就好像两个内容都已更新一样，但只有

price

值发生变化。如果 AgGrid 没有任何更新，为什么它会闪烁第一列？

如何防止这种情况发生，以便唯一闪烁的单元格实际上是更新的单元格？

Answer 1

您可以创建一个计算模型，在其中计算品牌并将此变量用作

rowData

，这样您就可以在

make

中引用

colDefs

。

创建计算：

const convertedData = computed(() => 
   rowData.value.map(row => ({
     ...row,
     make: row.electric + row.model
  }))
);

更新 colDef：

const colDefs = ref([
  { field: "make" },
  { field: "model" },
  { field: "price" },
  { field: "electric" },
]);

更新html：

<AgGridVue
   :rowData="convertedData"
   :columnDefs="colDefs"
   :gridOptions="defaultOptions"
   style="height: 500px"
   class="ag-theme-quartz"
   ref="grid"
/>