基于elementUI的el-input, el-tree 实现组件支持下拉选择框树的结构的数据

代码如下：
使用到组件：el-popover、el-selece、el-tree、el-input

<template>
    <el-popover
          placement="bottom"
          width="350"
          trigger="click">
          <el-tree
              ref="tree"
              :data="options"
              :check-strictly="true"
              show-checkbox
              node-key="enterpriseId"
              :default-expanded-keys="[]"
              :default-checked-keys="[]"
              :props="{
                children: 'child',
                label: 'enterpriseName'
              }"
              @check-change="handleCheckChage"
                @node-click="handleNodeClick"
            ></el-tree>

          <el-input slot="reference" 
          v-model="value.name" placeholder="采购人" clearable @clear="handleIptClear"></el-input>
        </el-popover>
</template>
<script>
export default {
    data(){
        return {
            options: [],
            value:{id:'', name: ''}
        }
    },
    methods: {
        // 清空输入框内容
        handleIptClear(){
            this.$refs.tree.setCheckedNodes([])
            this.value.id = ''
            this.value.name = ''
        },
        // checkbox被选中或取消选中
        handleCheckChage(arg1, arg2, arg3){
            const seltedNodes = this.$refs.tree.getCheckedNodes()
            const ids = seltedNodes.map(n => n.id)
            const names = seltedNodes.map(n => n.name)
            this.value.id = ids
            this.value.name = names
        },
        // 节点被点击
        handleNodeClick(arg1, arg2, arg3){
            console.log('nodes:', arg1, arg2, arg3)
        },
    }
}
</script>