element tree 的应用与实践

element-UI  tree   分级加载节点：load事件

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>

其中load方法事件中遇到情况如下：每个人应用场景不同，根据实际情况进行调整。

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name', // 该名称为树节点显示的名称
          children: 'zones' 
        },
        count: 1，
        tabledata:[]，
        treenodeone:'',//第一个节点的值。
      };
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      handleNodeClick(data) {
        //在此方法请求之前会执行loadNode方法
        data即为节点数据node
        if(data.level == 1)this.treenodeone = node;//将第一层节点进行记录，假设第五层节点还想用第一层节点数据，可将节点值用此方法全局化。
        console.log(data);
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);//当前为两个根节点  name变量必须与声明中的props的lable设置的内容一致
        }
        if (node.level > 3) return resolve([]);//resolve为当前节点赋值，追加在当前节点下
        ///假设进行当前界面的数据值过来，假设有个搜索条件为searchuser
        if(node.level == 2)//level为当前节点点击的层级
        {
           this.tabledata = this.tabledata.filter(t=>t.name = searchuser);//将现有数据针对搜索条件进行过滤。
        }
        ///
        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          hasChild = Math.random() > 0.5;
        }

        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);
      }
    }
  };
</script>

大致效果：

为搜索内容栏