el-select自定义下拉菜单内容完成树型选择

### 实现 `el-select` 组件中的树形结构选择 为了实现在 Element UI 的 `el-select` 中嵌入 `el-tree` 来提供树状选项的选择功能，可以采用如下方法： 创建一个新的 Vue 组件来封装此逻辑。该组件内部使用 `el-select` 和 `el-tree` 并通过事件绑定和属性传递的方式让两者协同工作。 对于样式方面，在 CSS 或者 SCSS 文件中设置 `.departAll::v-deep .el-select__tags { max-height: 90px; overflow-y: auto; }` 可以控制标签区域的最大高度并启用溢出后的滚动条[^2]。 下面是一个简单的例子展示如何构建这样的自定义下拉菜单: ```html <template> <div class="custom-tree-select"> <!-- 使用 v-model 控制 select 值 --> <el-select ref="select" :value="selectedValue" @focus="handleFocus" placeholder="请选择"> <!-- 自定义 slot 替换默认的 dropdown 内容 --> <el-option value=""> <el-tree :data="treeData" show-checkbox node-key="id" highlight-current :props="defaultProps" @check-change="handleCheckChange" /> </el-option> </el-select> <!-- 显示已选节点 --> <span>{{ selectedLabels }}</span> </div> </template> <script> export default { data() { return { treeData: [ // 初始化树数据... ], defaultProps: { children: 'children', label: 'label' }, checkedNodes: [], // 存储被勾选的节点 selectedValue: '' // 当前选中的值 }; }, computed: { selectedLabels() { const labels = this.checkedNodes.map(node => node.label); return labels.join(', '); } }, methods: { handleFocus(event) { // 手动触发弹窗展开 event.target.parentNode.querySelector('.el-input__inner').click(); }, handleCheckChange(data, checked, indeterminate) { if (checked || indeterminate) { !this.checkedNodes.includes(data) && this.checkedNodes.push(data); } else { this.checkedNodes.splice(this.checkedNodes.indexOf(data), 1); } // 更新 select 的值为所选 id 列表字符串形式 this.selectedValue = this.checkedNodes.map(item => item.id).join(','); // 向父级组件发送 change 事件通知更新状态 this.$emit('change', this.checkedNodes); } } }; </script> ``` 上述代码片段展示了怎样组合 `el-select` 和 `el-tree` 创建一个带有树形结构的多选器，并且处理了当用户点击复选框时同步更新到 Select 输入框内的文本显示以及其关联的 model 属性值的变化情况。