实现一个vue下拉树形选择

1、效果

2、基于element ui

基于element ui 的el-select.

<el-form-item prop="pid" label="父级：" :label-width="formLabelWidth">
    <el-select v-model="addAndEditFormData.pid" placeholder="请选择父级菜单" style="width:80%" clearable>
       <el-option :value="pidTemp.id" :label="pidTemp.name" style="height:150px;overflow: auto;background-color:#fff">
           <el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-option>
    </el-select>
</el-form-item>


data() {
    return {
      // 存放树形的源数据
      pidData: [],
      // 树形对应
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      // 选中一条数据的name和id，给值 el-option
      pidTemp: {
        id: '11',
        name: '1'
      },
    }
}

methods: {
	// 树形下拉点击调用
    handleNodeClick(data) {
      this.pidTemp.id = data.id;
      // el-select 值和 el-option 值对应上才能显示
      this.$set(this.addAndEditFormData, 'pid', data.id);
      this.pidTemp.name = data.name;
    },
}

3、出现的问题

在数据课代码写正确情况下可能会出现下拉正常，但是在输入框中不出现我们预想的值。原因是el-select 的v-model对应下方的el-option值找不到。