<el-tree-select

### `el-tree-select` 的使用方法与示例 在 Element UI 中，虽然没有官方的 `el-tree-select` 组件，但可以通过结合 `el-select` 和 `el-tree` 实现树形结构的选择器。这种组合方式可以满足需要从树形数据中进行选择的需求，同时保留下拉框的交互体验。 #### 基本实现思路 通常的做法是将 `el-tree` 放入一个自定义的下拉菜单中，并通过点击触发弹出树形结构供用户选择。例如： ```html <template> <el-select v-model="selectedNode" placeholder="请选择"> <el-option :value="selectedNode" :label="selectedLabel" style="display: none;"></el-option> <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" ref="treeSelect" ></el-tree> </el-select> </template> <script> export default { data() { return { selectedNode: '', selectedLabel: '', defaultProps: { children: 'children', label: 'label' }, treeData: [ { id: 1, label: '一级节点', children: [ { id: 2, label: '二级节点' } ] } ] }; }, methods: { handleNodeClick(data) { this.selectedNode = data.id; this.selectedLabel = data.label; } } }; </script> ``` 该实现方式利用了 `el-select` 的下拉特性，并在其内部放置 `el-tree` 来展示层级结构。当用户点击某个节点时，通过 `@node-click` 事件获取选中的节点信息并更新绑定值[^1]。 #### 高级用法：支持搜索和筛选 如果希望增强用户体验，可以在 `el-select` 中添加搜索功能，并结合过滤逻辑来动态展示匹配的节点。例如： ```html <template> <div> <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input> <el-tree :data="treeData" :props="defaultProps" :filter-node-method="filterNode" ref="tree" ></el-tree> </div> </template> <script> export default { data() { return { filterText: '', defaultProps: { children: 'children', label: 'label' }, treeData: [ { id: 1, label: '一级节点', children: [ { id: 2, label: '二级节点' } ] } ] }; }, watch: { filterText(val) { this.$refs.tree.filter(val); } }, methods: { filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; } } }; </script> ``` 上述代码通过 `filter-node-method` 实现节点过滤功能，使用户能够快速定位目标节点[^2]。 #### 样式优化与交互改进 为了提升交互体验，可以对下拉面板进行样式定制，例如隐藏默认选项、调整 `el-tree` 的高度等。此外，还可以结合 `popper-append-to-body` 属性控制下拉内容是否插入到 `body` 中，避免样式错位问题。 --- ###