vue.js - (Vue 3)错误: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows

Question

-- 初始设置--

创建组件

const ButtonAgGrid= {
  template: "<button>{{ displayValue }}</button>",
  setup(props) {
    const displayValue = 'TEST-TEXT';
    return {
      displayValue,
    };
  },
};

注册组件

<AgGridVue
  :components="{
    ButtonAgGrid
  }"
  ...
/>

传递数据

const columnDefs = [
{
  field: "name"
},
{
  field: "button",
  cellRenderer: "ButtonAgGrid",
}
]

const rowData = computed(() => {
  return {
   name: testReactiveValue.value ? 'test', 'test2'
  }
})

当计算出的“rowData”更新时，agGrid 发送错误:

Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.redrawRows(), call setTimeout(function() { api.redrawRows(); }, 0). To see what part of your code that caused the refresh check this stacktrace.

但是如果我们删除cellRenderer: "ButtonAgGrid"，一切都会正常工作

Answer 1

我的解决方案是手动更新rowData。

watchEffect(() => {
  gridApi.value?.setRowData(props.rowData);
});

这个效果很好，但我希望它是原来的