ant design of vue a-tree 异步加载

最新推荐文章于 2026-03-11 00:15:40 发布

原创最新推荐文章于 2026-03-11 00:15:40 发布 · 6.4k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

ant design of vue 专栏收录该内容

13 篇文章

订阅专栏

这篇博客记录了在使用a-tree组件时遇到的显示、点击无响应等系列问题，包括不显示文字、根节点及子节点点击失效等。作者通过调整代码，成功修复了所有问题，并提供了相关代码示例，涉及异步加载数据、节点展开控制等功能。

a-tree 异步树真是太多坑了，不显示文字，点击根节点没反应，点击子节点没反应，点击子节点出现的是上一个子节点内容，切换是否展示监管部门时点击过的子节点没反应，好在问题都一一解决了，记录一下。
在这里插入图片描述

在这里插入图片描述

<a-checkbox @change="onCheckboxDeptChange"> 是否展现非监管部门 </a-checkbox>
 <a-tree
            :replaceFields="replaceFields"
            :loadedKeys="loadedKeys"
            @expand="onExpand"
            @load="loadDept"
            :expandedKeys="expandedKeys"
            :load-data="onLoadDeptData"
            :tree-data="treeDeptData"
          />

data() {
    return {
      loadedKeys: [],
      expandedKeys: [],
      isShowAll: false, //非监管部门是否展示
      treeDeptData: [],
      replaceFields: {
        children: 'children',
        title: 'text',
        key: 'id',
      }, // 树数据结构匹配替换映射
      }
 }

//loadedKeys	（受控）已经加载的节点，需要配合 loadData 使用
    //	节点加载完毕时触发
    loadDept(loadedKeys) {
      this.loadedKeys = loadedKeys
    },

    //展开/收起节点时触发
    onExpand(keys) {
       // expandedKeys(.sync)	（受控）展开指定的树节点
      this.expandedKeys = keys
    },
    // 异步加载数据
    onLoadDeptData(treeNode) {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.requestGet(
            `/Dept/RegionDeptTreeByParent?isShowAll=${this.isShowAll}&&nodeTypeValue=${treeNode.dataRef.typeEnum}&&parent=${treeNode.dataRef.id}`
          ).then((res) => {
            treeNode.dataRef.children = res.data.map((item) => {
              return item
            })
            this.treeDeptData = [...this.treeDeptData]
            resolve()
          }, 1000)
        })
      })
    },

    //获取树结构
    RegionDeptTreeByParent() {
      this.loadedKeys=[]
      this.expandedKeys=[]
      this.requestGet('/Dept/RegionDeptTreeByParent').then((res) => {
        this.treeDeptData = res.data.map((item) => {
          item.isLeaf = false
          return item
        })
      })
    },
    //是否展现非监管部门
    onCheckboxDeptChange(e) {
      console.log(`checked = ${e.target.checked}`)
      if (e.target.checked == true) {
        this.isShowAll = true
      } else {
        this.isShowAll = false
      }
      this.treeDeptData=[]
      this.RegionDeptTreeByParent()
    },