【Vue】element UI tree 控件，点击父节点进行异步加载

Z时代
2024-01-10
分类：技术分享

点击父节点，获取该节点的id，然后渲染成子节点，
目前id已获取，子节点数据也请求到了，不知道怎么渲染到该节点下面
看官方介绍有一个load参数--加载子树数据的方法，有没有用过的同志来指导一下怎么用
【Vue】element UI tree 控件，点击父节点进行异步加载

    <el-tree
:props="props1"
:load="loadNode1"
node-key="id"
ref="tree"
highlight-current
lazy
show-checkbox
@node-click="handleNodeClick"></el-tree>

loadNode(node, resolve){
console.log(node);
// if (node.level === 0) {
//   return resolve([{ name: 'region' }]);
// }
// if (node.level > 1) return resolve([]);
// setTimeout(() => {
//   const data = [];
//
//   resolve(data);
// }, 500);
},
getClickchild(id) {
alert(id)
axios.get('/api/bank/oprtion/oprtionList.do?id='+id)
.then(function(res) {
console.log(res.data)
loadNode
})
.catch(function(error) {
console.log(error)
})
},
handleNodeClick(data) {
// this.clickId = data.id
console.log(data.id);
this.getClickchild(data.id)}}

回答

html:

<el-tree
    :props="props"
    :load="loadNode"
    node-key="id"
    ref="tree"
    highlight-current
    lazy
    show-checkbox
    @node-click="handleNodeClick">  </el-tree>

data:

props: {
    label: 'indexName',
    children: [],
    isLeaf: 'leaf'  }

js:

// 异步树节点点击事件
    handleNodeClick (data) {
      console.log('node', data)
    },
    // 异步树叶子节点懒加载逻辑
    loadNode (node, resolve) {
      // console.log(node, resolve)
      // 一级节点处理
      if (node.level === 0) {
        this.requestTree(resolve)
      }
      // 其余节点处理
      if (node.level >= 1) {
        // 注意！把resolve传到你自己的异步中去
        this.getIndex(node, resolve)
      }
    },
    // 异步加载叶子节点数据函数
    getIndex (node, resolve) {
      this.$AxiosAjax({
        loading: true,
        url: API_BASICQUOTA.getCatalogInfoByLevel,
        params: {id: node.data.id, level: node.data.level + 1 + '', type: 'all'}
      }).then(res => {
        if (res.data.code === '200') {
          // 处理节点是否是叶子节点
          res.data.catalogInfo.forEach(et => {
            if (et.isIndex === '1') {
              et.leaf = true
            } else {
              et.leaf = false
            }
          })
          let data = res.data.catalogInfo
          console.log(data)
          resolve(data)
        }
      })
    },
    // 首次加载一级节点数据函数
    requestTree (resolve) {
      this.$AxiosAjax({
        loading: true,
        url: API_BASICQUOTA.getCatalogInfoByLevel,
        params: {id: '', level: '1', type: 'all'}
      }).then(res => {
        if (res.data.code === '200') {
          // 处理节点是否是叶子节点
          res.data.catalogInfo.forEach(et => {
            if (et.isIndex === '1') {
              et.leaf = true
            } else {
              et.leaf = false
            }
          })
          let data = res.data.catalogInfo
          resolve(data)
        }
      })    }

刚刚解决。
首先文档的setTimeout,其实就是异步加载；
还是上代码吧。
我用的axios，都一样。
例：

    loadNode(node, resolve) {
      if (node.level == 1) {
        console.log(node.data);
        //注！把resolve传到你自己的异步中去
        this.getUser(node.data.fence, node.data.id, resolve);
      }
      // setTimeout(() => {
      //   var data;
      //   if (hasChild) {
      //     data = [
      //       {
      //         name: "zone" + this.count++
      //       },
      //       {
      //         name: "zone" + this.count++
      //       }
      //     ];
      //   } else {
      //     data = [];
      //   }
      //   resolve(data);
      // }, 500);    },

然后就是异步

//伪代码
getUser(node.data.fence, node.data.id, resolve){
    axios.post().then(res=> {
        let data = res.data;//改成tree需要的格式
        resolve(data);//解决？
    })
}

以上。
另外，element的文档确实有点问题啊。需要仔细领悟。

遇到同样的问题，找到解决的办法了吗

            treeProps: {
                label: 'name',
                children: [],
                isLeaf: 'isLeaf'
            },

'isLeaf' 在请求数据后我已经给它设置了true 但是，不显示下拉箭头啊。所以我点击他也不会继续请求下一级。怎么回事有人知道吗？
第二个问题，这里的children到底有什么用？为啥各位的demo都是把它设置为空数组？childen不应该是映射到树状图数据的具体字段吗？

那如果我执行增删改之后，要刷新某一级的树的数据，调接口重新获取，该怎么去调用
loadNode(node, resolve) {

  if (node.level === 0) {
    Promise.all([this.getNodes("")]).then(function(res) {
      resolve(res[0]);
    });
  } else if (node.level > 1) {
    resolve([]);
  } else {
    Promise.all([this.getNodes(node.data.id)]).then(function(res) {
      resolve(res[0]);
    });
  }
},
getNodes(id) {
  return new Promise(function(resolve, reject) {
    getBarndTree({
      parentProductCategory: id
    }).then(res => {
      resolve(res);
    });
  });
},