naive ui 表格renderExpand中调用接口时无限重复调用的问题？

Z时代
2024-02-06
分类：IT

第一次接触naive ui，使用table 中的 renderExpand 属性时，在属性中调用接口请求数据，如果数据定义为响应式，那么接口会无限重复请求，如果不定义为响应式，只会调用一次，但是无法渲染拿到的数据，我该怎么修改呢？

{
    type: 'expand',
    renderExpand: rowData => {
        const columns = [
         ...
        ]
        const tableData = ref([])
        // 自动重复调用接口
        getTableData().then(
          // 赋值
          tableData = ...
        )
        return h(
            NDatatable,
            {
                columns,
                data: tableData.value // 重复渲染导致重复调用
            },
            null
        )
    }}

回答：

{
  type: 'expand',
  renderExpand: rowData => {
    const tableData = ref([]) 
    // 用 watchEffect 
    watchEffect(() => {
      if (shouldCallApi(rowData)) {
        // 更新 tableData
        getTableData(rowData).then(data => {
          tableData.value = data
        })
      } else {
        // 用缓存数据
        tableData.value = getCachedResult(rowData)
      }
    })
    const columns = [
      // ...
    ]
    return h(
      NDatatable,
      {
        columns,
        data: tableData.value
      },
      null
    )
  }
}