element ui实现下拉框组合树形控件单选选择（过滤条件）

html部分：

<el-form-item label="执行主体">
          <el-select
            v-model="orgName"
            :popper-append-to-body="false"
            ref="selectTree"
            clearable
            @clear="clearOrgNames"
          >

            // 不需要过滤可以屏蔽这段
            <el-input placeholder="输入关键字进行过滤" v-model="filterName" class="filterStyle" />

            <el-option :value="orgList">
              <el-tree
                class="unit-tree"
                :data="executeList"
                node-key="id"
                :props="defaultProps"
                :default-expanded-keys="orgIds"
                ref="tree"
                highlight-current
                :expand-on-click-node="false"
                @node-click="nodeClickHandle"
                :filter-node-method="filterNode"  //配合过滤使用的
              >
              </el-tree>
            </el-option>
          </el-select>
</el-form-item>

js相关代码：

data() {
    return {
      // 执行主体机构列表
      executeList: [],  // 存放从后端获取的树形数据
      filterName: "",
      orgList: "",
      orgIds: [],
      orgName: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
watch: {
    filterName(val) {
      this.$refs.tree.filter(val);
    },
},
method: {
    // 清空执行主体选项
    clearOrgNames() {
      this.orgList = "";
      this.orgIds = [];
      this.orgName = "";
    },
    // 筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击节点选中
    nodeClickHandle(data) {
      this.orgName = data.name; 
      this.$refs.selectTree.blur(); 
    },
}

css相关代码：

<style lang="scss" scoped>
.el-select-dropdown__item {
  height: 200px !important;
  min-width: 260px;
  overflow-y: scroll !important;
}
.el-select-dropdown__item {
  background: #fff !important;
}
.el-select-dropdown__item::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.el-select-dropdown__item::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 6px;
}
.filterStyle {
  padding: 5px 20px;
    width: 260px;
}
</style>

下面看看效果：