a-tree 使用懒加载,第一次加载后添加节点刷新树导致节点展不开
引用官网的懒加载实例
<template> <a-tree :load-data="onLoadData"//节点懒加载方法 :tree-data="treeData" :loadedKeys="loadedKeys" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" /> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { TreeDataItem } from 'ant-design-vue/es/tree/Tree'; export default defineComponent({ setup() { const expandedKeys = ref<string[]>([]); const selectedKeys = ref<string[]>([]); const loadedKeys=ref<string[]>([]);//已经加载的节点会存在这个里面 const treeData = ref<TreeDataItem[]>([ { title: 'Expand to load', key: '0' }, { title: 'Expand to load', key: '1' }, { title: 'Tree Node', key: '2', isLeaf: true }, ]); const onLoadData = (treeNode: any) => { return new Promise((resolve: (value?: unknown) => void) => { if (treeNode.dataRef.children) { resolve(); return; } setTimeout(() => {//这里可替换成axios请求 treeNode.dataRef.children = [ { title: 'Child Node', key: `${treeNode.eventKey}-0` }, { title: 'Child Node', key: `${treeNode.eventKey}-1` }, ]; treeData.value = [...treeData.value]; resolve(); }, 1000); }); }; return { expandedKeys, selectedKeys, loadedKeys treeData, onLoadData, }; }, }); </script>
在使用的时候我们会发现,已经点击的节点再次点击不会掉请求,也就是说当我们展开一级节点后,新增节点然后刷新树,我们再次点击一级节点没有响应,这是因为一级节点已经加载过了,哪怕树刷新,他依旧标识的是已经加载,所以再次点击他不会调接口。所以,我们可以在每次添加节点后重新对树的loadedKeys方法进行置空处理。这样再次点击就可以触发懒加载调用请求。