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方法进行置空处理。这样再次点击就可以触发懒加载调用请求。

posted @ 2022-08-11 08:59  奔跑的哈密瓜  阅读(2983)  评论(0编辑  收藏  举报