element ui组件中el-select选择器组件与el-tree组件嵌套使用

首先先看效果图：

 <!-- html部分代码块 -->
      <el-form-item label="上级机构:" prop="region" size="small">
        <el-select v-model="ruleForm.region" placeholder="" ref="selectUpResId">
          <el-input placeholder="输入机构名称关键字" v-model="filterText">
          </el-input>
          <el-option
            hidden
            :key="ruleForm.region"
            :value="ruleForm.upResId"
            :label="ruleForm.region"
            style="height: auto">
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClick">
            </el-tree>
          </el-option>
        </el-select>
      </el-form-item>

相关的参数配置：

可根据需求参照官网： element ui官网

//绑定数据部分
 data: [
        {
          resId: 1,
          name: "一级 1",
          children: [
            {
              resId: 11,
              name: "二级 1-1",
              children: [
                {
                  name: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          resId: 2,
          name: "一级 2",
          children: [
            {
              resId: 22,
              name: "二级 2-1",
              children: [
                {
                  resId: 221,
                  name: "三级 2-1-1",
                },
              ],
            },
            {
              resId: 23,
              name: "二级 2-2",
              children: [
                {
                  resId: 224,
                  name: "三级 2-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
        filterText: "",//文字过滤
        ruleForm: { 
        region: "", //上级机构名称
        upResId: "", //上级机构id
        }

watch方法:

//   树形菜单筛选
 watch: {
    filterText(val) {
        console.log(val)
      this.$refs.tree.filter(val);
    },
  },

methods方法：

 //树形结构选中之后执行的函数
    handleNodeClick(data) {
      console.log(data.name);
      //给select赋值
      this.ruleForm.region = data.name;
      this.ruleForm.upResId = data.resId;
       // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.selectUpResId.blur();
    },
     //   树形菜单筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },