el-select多级下拉框

### 使用 `el-select` 实现多级联下拉选择器 为了实现一个多级联下拉选择器，可以利用 Vue 和 Element UI 的组合来构建自定义组件。通过嵌套多个 `el-cascader` 或者手动管理选项列表并监听输入变化，能够创建一个功能丰富的多级下拉菜单。 #### 方法一：使用 `el-cascader` Element UI 提供了一个名为 `el-cascader` 的组件专门用于处理这种场景下的需求[^1]： ```html <template> <div> <!-- Cascader 组件 --> <el-cascader v-model="selectedOptions" :options="options" @change="handleChange"> </el-cascader> </div> </template> <script> export default { data() { return { selectedOptions: [], options: [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则' }, { value: 'daohang', label: '导航', children: [{ value: 'cexiangdaohang', label: '侧向导航' }] }] }] }; }, methods: { handleChange(value) { console.log('changed:', value); } } }; </script> ``` 此方法适用于简单的父子关系结构的数据源，并且支持懒加载子节点等功能。 #### 方法二：基于 `el-select` 手动实现 如果希望更灵活地控制每一层的选择逻辑，则可以通过监听事件以及条件渲染的方式来自定义一个多选框链路: ```html <template> <div class="multi-level-selector"> <el-select v-for="(item, index) in selections" :key="index" v-model="selections[index]" placeholder="请选择" style="width: 200px;" @change="handleSelectChange(index)"> <el-option v-for="option in getLevelOptions(index)" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </div> </template> <script> import { ref } from "vue"; export default { setup() { const levels = [ [{ value: 'province', label: '省份' }], [], // 城市级别初始为空数组 [] // 地区级别初始为空数组 ]; let selections = ref(['']); function handleSelectChange(currentIndex) { if (currentIndex === 0 || currentIndex === 1) { // 清除后续级别的已选项 for(let i=currentIndex+1; i<selections.length; ++i){ selections[i]=''; } // 更新下一个级别的可选项 setTimeout(() => { updateNextLevelOptions(currentIndex); }); } } function updateNextLevelOptions(levelIndex) { switch (levelIndex) { case 0: // 根据所选省更新城市列表... break; case 1: // 根据所选城市更新地区列表... break; } } function getLevelOptions(levelIndex) { return levels[levelIndex]; } return { selections, handleSelectChange, getLevelOptions }; } } </script> ``` 这种方法允许开发者完全掌控各级之间的依赖关系及其交互行为，同时也提供了更高的定制可能性。