标签：node resolve name level tree element UI data 节点

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>

大致效果：

为搜索内容栏     

标签：node,resolve,name,level,tree,element,UI,data,节点
来源： https://www.cnblogs.com/Y-o-u/p/15961265.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。