elementUI动态加载的树状选择器

如图所示：

树状选择器

在elementUI中，并没有提供这样的选择器组件，所以需要自己组装一个。
其实这并不是一个选择器，只是一个带icon的输入框和背景色为白色的树状区域。

icon

html:

  <el-input
    placeholder="请选择巡检对象"
    v-model="formData.inspectObjectName"
    icon="caret-bottom"
    readonly="readonly"
    @click.native="isShowSelect = !isShowSelect">
  </el-input>
  <el-tree v-if="isShowSelect"
           empty-text="暂无数据"
           :expand-on-click-node="false"
           :data="inspectionObjectOptions"
           :props="defaultProps"
           :load="loadNode"
           lazy
           @node-click="handleNodeClick"
           class="objectTree">
  </el-tree>

css:

.objectTree {
      position: absolute;
      overflow: auto;
      z-index: 100;
      width: 100%;
      height: 300px;
 }

js:

 // 1.参数
 // 表单数据
 formData: {
   // 传给后台的id
   inspectObject: "",
   // 输入框显示的
   inspectObjectName: ""
 },
 // 是否显示巡检对象的树状选择器
 isShowSelect: false,
 // 巡检对象的选项数据
 inspectionObjectOptions: [],
 // 巡检对象的选项的配置参数
  defaultProps: {
      id: "id",
      label: 'departName',
      children: 'children'
  },

  // 2.方法
  // 点击巡检对象的选择器的树节点
  handleNodeClick(data, Node) {
    // 如果是顶级父节点
    if (Node.parent.level === 0) {
      // 不会触发事件
    }
    else {
      this.formData.inspectObjectName = data.departName;
      this.formData.inspectObject = data.id;
      // 关闭选择器
      this.isShowSelect = false;
    }
  },
  // 加载树结点
  loadNode(node, resolve) {
    // 如果是顶级的父节点
    if (node.level === 0) {
      // 查找两个顶级巡检对象
      findTopPrincipleTarget().then(res => {
        if (res.success) {
          return resolve(res.obj);
        } else {
          this.$message.error(res.msg);
        }
      });
    }
    else {
      let params = {
        parentId: node.data.id,
        principleId: this.formData.principleLine
      };
      // 根据父节点id找寻下一级的所有节点 
      findPrincipleTarget(params).then(res => {
        if (res.success) {
          return resolve(res.obj);
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  },