Antd tree vue2 树懒加载局部更新获取数据

最新推荐文章于 2024-05-27 14:12:02 发布

星星chok

最新推荐文章于 2024-05-27 14:12:02 发布

阅读量163

点赞数 2

文章标签： java 前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_38985444/article/details/139138453

版权

	<a-tree
        @select="selectTree"
        :tree-data="treeData"
        :expandedKeys="expandedKeys"
        @expand="onExpand"
        :load-data="onLoadData"
      />

  data() {
    return {
      treeData: [],
      treeNode: null,
      expandedKeys: [],
    }
   }
	//展开懒加载
    onLoadData(treeNode) {
      if (treeNode.dataRef.leaf) return
      return new Promise(resolve => {
        if (treeNode.dataRef.item && treeNode.dataRef.item.length > 0) {
          resolve()
          return
        }
        setTimeout(() => {
          this.getTreeData(treeNode)
          resolve()
        }, 1000)
      })
    },
    //获取树数据
     getTreeData(treeNode) {
      let treeData = []
      this.$axios
        .modelResultGetClueList({
          appName: treeNode?.dataRef?.appName, //应用
          accountNo: treeNode?.dataRef?.accountNo,   
          ...this.searchObj
        })
        .then(res => {
          if (res.data.success) {
            if (res.data?.data?.length) {
              //  异步数据加载
              if (treeNode?.dataRef) {
                treeNode.dataRef.item = res.data.data
                treeData = [...this.treeData]
              } else {
                treeData = res.data.data || []
              }
              this.treeData = treeData || []
            }
          }
        })
        .catch(err => {
          this.$throw(err)
        })
	},
	/*思路
	树点击或者展开时保存需要操作的节点的父级，局部加载时把父级节点的子级设置为空，再填充新数据
	*/
	 //树点击
    selectTree(a, treeNode) {
      this.treeNode = treeNode.node.$parent//拿到需要操作的节点
	},
	//局部加载
    treeNodeGet() {
      if (this.treeNode?.dataRef) {
        this.treeNode.dataRef.children = []//设置为空
        this.getTreeData(this.treeNode)//填充节点数据
      }
    },