el-select展示两级tree结构的数据

### 实现 `el-select` 中两级树形结构数据的显示 为了在 Vue 和 Element UI 的 `el-select` 组件中展示两级树形结构的数据，可以采用嵌套的方式，在 `el-select` 内部使用 `el-tree` 来呈现多级选项。下面提供了一个具体的实现方法： #### HTML 结构与组件定义 通过模板语法构建基础的选择器和树形控件组合。 ```html <template> <div> <el-select ref="selectTree" v-model="selectedValue" filterable placeholder="请选择..." @visible-change="handleVisibleChange"> <!-- 隐藏默认项 --> <el-option :value="null" style="display:none"/> <!-- 树形结构容器 --> <el-tree ref="tree" :data="treeData" :props="defaultProps" node-key="id" highlight-current :expand-on-click-node="false" @node-click="handleNodeClick"> </el-tree> </el-select> </div> </template> ``` 此部分展示了如何将 `el-tree` 嵌入到 `el-select` 中作为其子元素[^1]。 #### JavaScript 方法逻辑 接下来是处理节点点击以及下拉框可见状态改变的相关函数。 ```javascript <script> export default { data() { return { selectedValue: null, treeData: [ // 这里放置实际的树状数据源... ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { handleVisibleChange(visible) { if (visible && this.$refs.tree) { const firstLeaf = this.getFirstLeaf(this.treeData); if (firstLeaf) { setTimeout(() => { this.$refs.tree.setCurrentKey(firstLeaf.id); }, 0); } } }, getFirstLeaf(data, parent = null){ let leaf; function traverse(nodeList) { for(let i=0;i<nodeList.length&&!leaf;i++){ const item=nodeList[i]; !item.children||!item.children.length?( leaf={ ...item,parent }):(traverse(item.children)); } } traverse(data); return leaf; }, handleNodeClick(data,node,self){ this.selectedValue=data[this.defaultProps.label]; this.$nextTick(()=>{ self.parent.visible=false; }); } } }; </script> ``` 上述脚本实现了当用户展开选择列表时自动聚焦于首个叶子节点，并允许单击任意节点完成选择并关闭弹层。 #### CSS 样式调整 最后可能还需要一些自定义样式来优化用户体验，比如设置合适的高度、滚动条等特性。 ```css <style scoped> /* 自定义样式 */ .el-scrollbar__wrap{ overflow-x:hidden!important; } </style> ``` 这种设计模式不仅适用于两层级联选择场景，还可以扩展至更多层次的复杂需求上。对于更复杂的业务逻辑，则可以根据实际情况进一步增强交互体验和服务端接口的支持[^2]。