目录
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.pageSizeconst limit = pagination.value.pageSizeconst 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)
}
