element-ui动态加载树组件的叶子

444 阅读1分钟

一、vue模板的使用

<el-tree 
:key="timer" 
:indent="0"  
node-key="id" 
:props="defaultProps"  
:load="loadNode" 
lazy>
</el-tree>

注!load:加载的规则
    lazy:load必须配合lazy使用

二、loadNode代码

  //动态加载树组件根组织的成员
   loadNode(node, resolve) {
      //添加根节点
      if (node.level === 0) {
        const data = [...this.treearr];
        return resolve(data);
      }
      //node是当前点击的节点
      if (node.data) {
        //判断是否有子节点,没有就发送请求去获取节点
        if (node.data.children == undefined) {
          //如果节点为人的话,就不发送请求去获取子节点了
          //loginAccount是区别人还是组织的字段
          if (node.data.loginAccount) { return resolve([]) }
          const params = {
            page: 1,
            pageSize: 100,
            organizationId: node.data.id,
            userEentrance: "entrance_manager",
          };
          //根据枝干节点发送请求获取叶子节点
          queryUserPageByLimit(params).then((res) => {
            node.data.children = res.data.data
            resolve([...res.data.data])
            //设置发送请求获取的子节点为叶子节点
            //isLeaf是节点是否也叶子节点的标识,非叶子则有右边三角标识
            node.childNodes.forEach((item) => {
              item.isLeaf = true
            })
          })
        } else {
          //有就直接添加子节点
          resolve([...node.data.children])
        }
      } else { resolve([]) }
    }
 trearr=[{        children:[{            id:"100301489616064512",            name:"四川华西绿舍建材有限公司水泥供应站",            parentId:"22876753760489472",        }],
        id:"172530725319479296",
        parentId:"parent_id",
        name:"ces1222222",
        }]
 defaultProps= {
        children: "children",
        label: "name",
      }