el-select与el-tree联用，构建下拉框为树形列表的select

<template>
  <div>
      <span>2.select下拉列表用tree代替,双击选中</span>
      <el-select
        ref="elSelect"
        v-model="msg"
      >
        <!-- <el-option value="123" label="123" /> -->//不用option下拉列表，用empty下拉列表
        <!-- <div slot="empty">empty...</div> --> //老版插槽写法
        <template #empty>
          <el-tree 
          :data="data" 
          @node-click="handleNodeClick" 
          @dblclick.native="handleNodeClick" />
        </template>
      <!-- <template #empty="scope">//该组件没有使用作用域插槽返回数据，不能这样写
      </template> -->
      </el-select>
  </div>
</template>
<script>
export default {
  name: 'TextComponent',
  data() {
    return {
      data: [{ label: '1组', value: 1, children: [{ label: '人物1', value: 'dyn' }, { label: '人物2', value: 'yqc' }] }],
      selectTree: {}
    }
  },
  methods: {
    // el-tree没有option不会触发chenge事件
    // change(value) {
    //   this.msg = value
    // },
    handleNodeClick(obj) {
      // 如有需求，传递给接口之前做数据格式化，将label映射为value
      if (!obj.label) {
        // 双击
        this.msg = this.selectTree.label
        // 手动关闭select下拉框
        this.$refs.elSelect.blur()
      } else {
        // 单击
        this.selectTree = Object.assign({}, obj)
      }
    }
  }
}
</script>