element自定义下拉框组件，使用el-input和el-tree封装下拉树

封装SelectTree下拉选择树

有时候我们需要再select中嵌套一个Tree组件，如下这样：

代码如下

<template>
    <div>
        <el-popover
            placement="bottom-start"
            v-model="popover"
            trigger="click"
            >
                <el-input style="width:220px" v-model="treeValue" @input="search" :debounce="debounce" slot="reference"></el-input>
                <el-scrollbar wrap-style="max-height: 300px;">
                      <el-tree 
                        accordion
                        v-model="treeValue"  
                        highlight-current
                        lazy
                        :load="loadNode"
                        :props="defaultProps"
                        :expand-on-click-node='false'
                        @node-click="handleNodeClick"></el-tree>
                  </el-scrollbar>
          </el-popover>
    </div>
</template>
<script>
export default {
   props:{
   },
    data(){
        return {
        popover:false,
        debounce:1000,
        treeValue:"",
        defaultProps: {
           children: 'children',
           label: 'managementGroupName', //元素显示的标签名
           isLeaf: 'leaf'  //判断是否有子节点的标准
           },
        firstValue:"",
        firstName:""
        }
    },
    methods:{
     //选择其中的元素按钮
      handleNodeClick(e) {  
      },
      search(){  //搜索
      },
      reset(){
      },
      handlerInput(e){
          this.hander=e?true:false;
      },
      loadNode(node, resolve) {
        //初始化
        if (node.level === 0) {//初始化默认数据第一层  此处做了动态加载
           return this.$axios.post(this.$url3.queryPartOrgTree).then(res=>{
            if(res.code=="success"){
                const selectData=[{  
                  managementGroupName:res.data.managementGroupName,
                  code:res.data.managementGroupCode
                }]
                this.firstName=this.treeValue=res.data.managementGroupName;
                this.firstValue=res.data.managementGroupCode;
                this.$emit("selectTree",res.data.managementGroupCode);
               resolve(selectData);//返回元素
            }
          })
        }
        //最多层级的限制
        if (node.level > 2) return resolve([]);
        //点击的层级进行判断
        if(node.data.managementGroupName=="总裁"){
           this.$axios.post(this.$url3.queryPartOrgTreeTwo+`?parentCode=${node.data.managementGroupCode}&&hierarchy=2`).then(res=>{
            if(res.code=='success'){
              resolve(res.data)
            }
         })
        }else if(node.data.managementGroupName.slice(-2)=="大区"||node.data.managementGroupName.slice(-3)=="管理组"){
         this.$axios.post(this.$url3.queryPartOrgTreeTwo+`?parentCode=${node.data.managementGroupCode}&&hierarchy=3`).then(res=>{
            if(res.code=='success'){
              const newData=[];
              res.data.map(item=>{
                 newData.push({managementGroupName:item.deptName,code:item.deptCode,leaf:true})
              })
              resolve(newData)
            }
         })
        }
      }
    }
}
</script>

以上是封装select的一种思想，代码不可以直接复制粘贴，需要把里面的接口返回的数据改成自己的，建议结合element中的el-Tree，和el-popover提示框的属性和方法，根据自己的需求进行封装