el-option包着el-tree

Element UI 中 el-tree 嵌套在 el-option 的用法
为了实现 el-tree 组件嵌入到 el-select 下拉框内的功能，可以采用将 el-tree 放置在 el-option 内的方式。通过自定义模板并结合 Vue.js 数据绑定机制来完成这一需求。
HTML 结构
<template>
<div>
<el-select
ref="selectTree"
v-model="selectedId"
filterable
placeholder="请选择..."
>
<!-- 隐藏选项 -->
<el-option :value="null" style="display:none"/>

<!-- 树形结构展示区域 -->
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
node-key="id"
highlight-current
@node-click="handleNodeClick"
:filter-node-method="filterNode"
:expand-on-click-node="false"
/>
</el-select>
</div>
</template>
登录后复制
此部分HTML代码构建了一个基础的选择器框架，并在其内部放置了树状菜单组件[^2]。
JavaScript 方法配置
export default {
data() {
return {
selectedId: null,
treeData: [
// 初始化树的数据源...
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},

watch: {
'$refs.selectTree.query'(val) { this.$refs.tree.filter(val); } // 监听查询变化触发过滤函数
},

methods: {
handleNodeClick(data, node) {
const select = this.$refs['selectTree'];
let resultLabel = '';
if (this.defaultProps.label &amp;&amp; data[this.defaultProps.label]) {
resultLabel += data[this.defaultProps.label];
}

select.selectedLabel = resultLabel;
select.visible = false;

this.selectedId = data.id || null;
},

filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}
}
登录后复制
上述JavaScript逻辑实现了当点击某个节点时自动关闭下拉列表并将所选项目的ID赋给v-model绑定变量；同时也支持输入框模糊匹配筛选树节点的功能[^4]。
CSS样式调整
由于默认情况下 el-tree 并不适合放在 el-option 内部显示，因此可能还需要额外添加一些CSS来自定义其外观以适应特定场景下的视觉效果：
/* 调整树的高度 */
.el-scrollbar__wrap{
overflow-x:hidden !important;
}

/* 设置最大高度 */
.el-select-dropdown .el-tree {
max-height: 200px;
overflow-y: auto;
}
登录后复制
以上就是关于如何把 el-tree 组件嵌入至 el-option 当中的具体做法说明][^[^24]。