目錄
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)
}
