Element-Select選擇器結合樹形控件

Element UI中Select選擇器的下拉選項是普通的列表，但是有些情況下，需要提供下拉菜單，這時就需要結合Select選擇器和樹形控件Tree了，其代碼如下

<template>
  <div class="about">
<!--  選擇器選項以樹形控件展示  -->
      <el-select v-model="form.id" placeholder="請選擇" ref="selectTree">
          <el-option :key="form.id" :value="form.id" :label="form.label" hidden/>
          <el-tree :data="data"
                   :props="defaultProps"
                   node-key="id"
                   accordion
                   highlight-current
                   @node-click="handleNodeClick"/>
      </el-select>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        label: '一級 1',
        children: [{
          label: '二級 1-1',
          children: [{
            label: '三級 1-1-1'
          }]
        }]
      }, {
        label: '一級 2',
        children: [{
          label: '二級 2-1',
          children: [{
            label: '三級 2-1-1'
          }]
        }, {
          label: '二級 2-2',
          children: [{
            label: '三級 2-2-1'
          }]
        }]
      }, {
        label: '一級 3',
        children: [{
          label: '二級 3-1',
          children: [{
            label: '三級 3-1-1'
          }]
        }, {
          label: '二級 3-2',
          children: [{
            label: '三級 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        id: '',
        value: ''
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      // console.log(data)
      this.form = {
        id: data.label,
        value: data.label
      }
      // 使 input 失去焦點，並隱藏下拉框
      this.$refs.selectTree.blur()
    }
  }
}
</script>

最終效果如下所示：

小結：

1. 需要提供一個隱藏的option標籤：<el-option :key="form.id" :value="form.id" :label="form.label" hidden/>
2. 當點擊節點後，需要調用Select選擇器的blur方法隱藏下拉框：this.$refs.selectTree.blur()