arco design框架中的树形表格使用中的缓存问题

1.问题

2.解决方案

1.问题

arco design框架中的树形表格使用中的缓存问题，使用了树形表格的load-more懒加载

点击展开按钮后，点击关闭，再次点击展开按钮时，没有调用查询接口，而是使用了缓存的数据。

2.解决方案

使用load-more懒加载时存在缓存问题，然后增加行点击事件

在行点击事件中，查询当前节点的子节点信息，然后设置child信息，然后再展开当前节点

然后在点击页面的查询处理时，关闭所有节点

这样如果想看到最新的子节点信息，通过行点击事件来进行查看，原来的展开按钮可以用来查看之前的子节点信息

示例代码

追加了行点击事件

复制代码

<a-table :columns="columns" :data="dataList" :loading="loading" ref="tableRef"
         :bordered="{cell:true}" column-resizable row-key="id"
         :pagination="pagination" @page-change="onPageChange" @page-size-change="onPageSizeChange"
         :scroll="{ x: '100%',y: '100%'}" :scrollbar="true"
         :load-more="loadMore" v-model:expandedKeys="expandedKeys" @row-click="rowClick">
  <template #createDate="{ record }">
    {{ moment(record.createDate).format('YYYY-MM-DD HH:mm:ss') }}
  </template>
  <template #operations="{ record }">
    <a-space :size="10">
      <a-button status='success' @click="viewDetail(record.id, record.fileId, record.fileName)">
        查看详情
      </a-button>
    </a-space>
  </template>
</a-table>

每次查询时，取消所有的展开状态

复制代码

const getDataList = async () => {
  loading.value = true;
  try {
    const offset = (pagination.value.current - 1) * pagination.value.pageSize
    const limit = pagination.value.pageSize
    const res = await apiGetArchiveList({
      page: {offset: offset, limit: limit},
      archiveName: form.value.archiveName,
      sourceName: form.value.sourceName,
      level: form.value.level,
      fileId: form.value.fileId,
    });
    res.rows.forEach((item: any) => {
      item.key = item.id;
    })
    dataList.value = res.rows;
    pagination.value.total = res.total;
    tableRef.value.expandAll(false)
    expandedKeys.value = []
  } finally {
    loading.value = false;
  }
}

loadmore正常使用，不使用时不出现展开按钮

复制代码

const loadMore = async (record: any, done: any) => {
  // 调用接口查询子树信息
  const res = await getChildList(record.id)
  // 显示数据
  record.children = undefined;
  done(res)

}

追加行点击事件，获取子节点信息，并展开节点

复制代码

const getChildList = async (id: string) => {
  const res = await apiGetChild({id: id})
  res.forEach((item: any) => {
    item.key = item.id;
  })
  return res;
}


const rowClick = async (record: any) => {
  // 调用接口查询子树信息
  const res = await getChildList(record.id)
  record.children = res

  // 展开
  tableRef.value.expand(record.id, true)
}