element UI 中Tree树形控件懒加载 v-popover的使用

文件夹、组织机构、权限管理、等级划分、国家地区等等，生活中太多的事物都为树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能，更为直观地看清树结构。 

开发项目的过程中经常用到tree树形控件（当然也可能是table），当请求数据量很大时，没有懒加载往往会显示empty-text 的内容，也就是空数据。

---

在实际的项目开发中，懒加载获取数据，需要后端提供分级加载组织树的接口。 

官方文档：

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/tree

举例：

先看效果：

---

     官网给出：

load    加载子树数据的方法，仅当 lazy 属性为true 时生效     function(node, resolve)

    此函数接收两个参数，一个是node,即当前节点，一个是resolve作为数据处理函数。可以后台打印分析。

        resolve函数，我认为就是把请求下来的数据放到当前 node.level 这一层的方法，比如请求下来的数组为 getdata ，只需要 resolve(getdata) .下边，通过定时器异步加载获取简单的数据，来进行一个简单的实例。若有 问题/错误/建议,勿喷，欢迎评论留言，谢谢！

---

template

<template>
    <div>
        <!-- isLeaf  指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 -->
    <ElPopover
      ref="organization"
      
      trigger="click"
      :width="220"
      placement="bottom-start"
      :visible-arrow="false"
    >
      <ElTree
       empty-text="暂无信息"
       lazy
       :load="loadNode"
       :props="props"
       @node-click="selectOrgCate"
       show-checkbox
      />

    </ElPopover>

      <ElInput
      v-popover:organization
      size="mini"
      readonly
    />
    </div>
</template>

---

         v-popover 是Popover 弹出框与其他组件建立联系的，这里以input输入框为例，organization指向Popover 的索引ref，使其建立联系，所以在这个输入框点击就会弹出popover组件的内容。

javascript

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',
          isLeaf: 'leaf'
        },
      };
    },

    methods: {
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'box---1' }, { name: 'box---2' },{ name: 'box---3' }]);
          
        }
        if (node.level > 5) return resolve([]);

        var flag;
        if (node.data.name === 'box---1') {
          flag = true;
        } else if (node.data.name === 'box---2') {
          flag = false;
        } else {
            // Math.floor (Math.random()*5+1) 生成骰子数1-6
          flag = Math.floor (Math.random()*5+1)>2? true : false 
        }

        setTimeout(() => {
          var data;
          if (flag) {
            data = [{
              name: 'get------' + Math.floor (Math.random()*100)
            }, {
              name: 'get------' + Math.floor (Math.random()*100)
            }];
          } else {
            data = [];
          }

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