el-tree

1. 实现elementUI的el-tree基本的懒加载(通过点击触发事件，加载下一级)

    html部分

      <el-tree
          ref="eltree"
          :data="treeData"
          :props="defaultProps"
          :load="loadNode"
          lazy
        ></el-tree>

   实现懒加载

 loadNode(node, resolve) { //懒加载的方法
      if (node.level === 0) { //如果是第一级，调取接口resolve出对应数据的一级数据
        allOperate().then(res => {
          if (res.code === 0) {
            //通过map重组数据结构
            let data = res.data.map((item, index) => {
              return {
                label: item.operatorName,
                operatorID: item.operatorID
              };
            });
            resolve(data);
          }
        });
      }
      if (node.level === 1) { //点击一级，触发调用第二级数据
        allcharge(node.data.operatorID).then(res => {
          if (res.code === 0) {
            let children = res.data.map((item, index) => ({
              label: item.stationName,
              stationID: item.stationID
            }));
            resolve(children);
          }
        });
      }
      if (node.level === 2) {
        allStaion(node.data.stationID).then(res => {
          if (res.code === 0) {
            let children = res.data.map((item, index) => ({
              label: item.equipmentName,
              equipmentID: item.equipmentID
            }));
            resolve(children);
          }
        });
      }
      
      //没有第三级，点击第二级不会再有新的数据
      if (node.level > 2) return resolve([]);
    },

   

2.其实基本的二级并不能满足一些需求，比如当二级数据过多的时候，浏览器也会渲染很久，因为，有时候需要将某一级的数据在进行分批显示，如下例子，二级数据过多时，点击更多进行加载二级剩下数据，每次二级只显示100条

  如图 - 点击更多加载二级数据

     

   HTML

        <el-tree
          ref="eltree"
          :props="defaultProps"
          :data="treeData"
          node-key="operatorID" //高亮的依据标识
          :highlight-current="hiC"  //设置高亮
          @node-expand="handleNodeClick"
          @node-click="handleNodeC"
        ></el-tree>

  数据结构 

    注明-由于二级数据有3000条后台是在一次性返回的，查看浏览器发现返回数据是很快的，只是渲染3000条数据很慢，因此对  数据进行梳理，利用loadMore进行标识具体是哪个一级在点击更多，去调对应接口

 defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf"
      },
treeData：[],
loadMore：{} //用户保存，点击第几次更多

  js部分

   //初次加载，获取第一级数据结构
    async getTree() {
      let res = await allOperate();
      if (res.code === 0) {
       //对数据进行重组
        this.treeData = res.data.map((item, index) => {
          return {
            label: item.operatorName,
            operatorID: item.operatorID,
            children: [{}]
          };
        });

       //记录所有的一级当前更多点击为0
        this.treeData.forEach(item => {
          this.loadMore[item.operatorID] = 0; 
        });

        this.$nextTick(() => {
          if (this.$route.query.operatorID) {
            //设置默认显示的数据高亮
            this.$refs.eltree.setCurrentKey(this.$route.query.operatorID);
          }
        });
      }
    },
  
  //节点点击时候被回调 - 节点点击都会触发
  handleNodeC(row, node, nodeA, isIcon) {
      // 二级节点，点击时候，需求是触发新的查询，这里为了避免多次点击，数据返回显示，利 
      // 用节流优化性能
      if (node.level === 2 && row.stationID) {
        // 查询列表
        this.showFont = false;
        this.stationID = row.stationID;
        this.time && clearTimeout(this.time);
        if (this.immediate) {
          this.immediate = false;
          this.getCToS();
          this.time = setTimeout(() => {}, 1000);
        } else {
          this.time = setTimeout(() => {
            this.getCToS();
            this.immediate = true;
          }, 500);
        }
      } else {
        this.tableData = [];
      }
    },
    // 节点被展开 - 只有有儿子的节点才会被触发
    handleNodeClick(row, node, nodeA) {
      //点击一级节点时候，获取二级节点
      if (
        node.level === 1 &&
        row.operatorID &&
        row.children &&
        row.children.length === 1
      ) {
        //调用接口获取二级节点
        this.getTwoNode(row.operatorID);
      }

      // 点击更多 || 更多前的小图标(写在这里不写handleNodeC,避免当点击更多文字，触发两次，造成点击更多次数出错)
      if (row.label === "更多" && node.level === 2 && row.ismore) {
        // 切换状态
        row.label = "加载中"
        this.loadMore[node.parent.data.operatorID]++;
        this.getTwoNode(node.parent.data.operatorID);
        // this.handleNodeC(row, node, nodeA, true);
      }
    },
   
    //获取二级节点
    async getTwoNode(operatorID) {
      //获取当前点击节点的更多次数
      let current = this.loadMore[operatorID];
      let obj = {
        current,
        operatorID,
        size: 100
      };

      let res = await allcharge(obj);

      if (res.code === 0) {
        let data = res.data.rows.map((item, index) => {
          return {
            label: item.stationName,
            stationID: item.stationID
          };
        });
        
        // 如果二级数据超多100条，进行添加更多
        if (res.data.total - (current + 1) * 100 > 0) {
          // debugger;
          this.treeData.forEach(item => {
            if (item.operatorID === operatorID) {
              item["children"].splice(current * 100, 1);
              item["children"] = item["children"].concat(data);
              item["children"].push({
                label: "更多",
                ismore: true,
                children: [{}]
              });
            }
          });
        } else { //如果二级数据少于一百条，直接显示
          this.treeData.forEach(item => {
            if (item.operatorID === operatorID) {
              item["children"].splice(current * 100, 1);
              item["children"] = item["children"].concat(data);
            }
          });
        }
      }
    },

 

3.设置树默认高亮

   一定要设置node-key 进行标识

    this.$refs.eltree.setCurrentKe(标识)

  

if (this.$route.query.operatorID) {
   //设置默认显示的数据高亮
   this.$refs.eltree.setCurrentKey(this.$route.query.operatorID);
 }

    其实在官网的api中有多种方式

 

4.本文案例中用到的api

 Attributes

    

  events

 

   方法