vue用el-select和el-tree实现树状结构单击选中

业务需求是选择框展示后端传来的树状结构数据，可下拉，选中节点显示在输入框下拉菜单消失

一、代码

1.template部分

<template>
  <div>
    <el-select
      // ref属性注册，用于在vue中操作dom元素
      ref="selectTree"
      v-model="form.Id"
      filterable
      placeholder="请选择...">
      <el-option
        :key="form.Id"
        :value="form.Id"
        :label="form.label"
        style="height: auto"
        hidden/>
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        :node-key="defaultProps.value"
        default-expand-all
        @node-click="handleClickNode"
        />
    </el-select>
  </div>
</template>

注意：el-option需要设置一个hidden隐藏的下拉选项,若不设置则tree组件无法使用,因为选择器是el-select和el-option组成的下拉选项,tree自带下拉选择,所以需要隐藏el-option的下拉选项。

2、data部分

data: [{
          Id: 1,
          label: '一级 1',
          children: [{
            Id: 11,
            label: '二级 1-1',
            children: [{
              Id: 111,
              label: '三级 1-1-1'
            }]
          }]
        }, {
          Id: 2,
          label: '一级 2',
          children: [{
            Id: 21,
            label: '二级 2-1',
            children: [{
              Id: 211,
              label: '三级 2-1-1'
            }]
          }, {
            Id: 22,
            label: '二级 2-2',
            children: [{
              Id: 221,
              label: '三级 2-2-1'
            }]
          }]
        }, {
          Id: 3,
          label: '一级 3',
          children: [{
            Id: 31,
            label: '二级 3-1',
            children: [{
              Id: 311,
              label: '三级 3-1-1'
            }]
          }, {
            Id: 32,
            label: '二级 3-2',
            children: [{
              Id: 321,
              label: '三级 3-2-1'
            }]
          }]
        }],
        treeList: [],
        defaultProps: {
          /** 唯一标识 **/
          value: 'Id',
          /** 标签显示 **/
          label: 'label',
          /** 子级 **/
          children: 'children' }
        //这个是el-select要绑定的数据，等下需要赋值
        form {
            id： "",
            label: ""
         }
      }
/* 注：如果想要展示的data是后端传来的树结构，把data改为res赋值对象 */

3、方法部分

     //节点点击事件
     handleClickNode(data) {
	   this.form.Id = data.Id
	   this.form.label = data.label
	   // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
	   this.$refs.selectTree.blur()
    },

注意：点击事件的data不要改，上面：data属性已经把后端的数据给绑定上了，这里全部写data