el-select如何实现二级下拉多选

### Element UI `el-select` 组件实现二级联动多选功能 为了实现在Element UI的`el-select`组件中完成二级联动并支持多选的效果，可以采用如下方式： #### 数据准备 首先定义好两个数组用于存储一级选项以及对应的二级选项。这些数据可以通过API请求获取或者静态设定。 ```javascript data() { return { options1: [], // 一级菜单的数据源 selectedOption1: '', // 已选择的一级菜单项 options2Map: {}, // 存储每个一级分类对应的所有可能的二级分类映射表 selectedOptions2: [] // 多选状态下已选择的二级菜单项集合 }; } ``` #### 模板编写 使用`<template>`标签包裹`el-cascader`或嵌套两层`el-select`来构建界面布局，并利用`:props="{multiple: true}"`属性开启多选模式[^4]。 对于单个`el-select`来说，则需注意设置`collapse-tags`属性以便于展示多个tag形式的选择结果；而对于作为子集存在的另一个`el-select`则要依据父级所选定的内容动态调整自身的显示内容[^3]。 ```html <!-- 单独使用的 el-select --> <el-select v-model="selectedOption1" placeholder="请选择"> <el-option v-for="(item,index) in options1" :key="index" :label="item.label" :value="item.value"></el-option> </el-select> <!-- 动态变化的第二个 el-select --> <el-select v-if="Object.keys(options2Map[selectedOption1]).length>0" multiple collapse-tags v-model="selectedOptions2" placeholder="请选择"> <el-option v-for="(subItem, subIndex) in options2Map[selectedOption1]" :key="subIndex" :label="subItem.label" :value="subItem.value"> </el-option> </el-select> ``` #### 方法与监听器 添加watcher监控第一个下拉框的变化情况，在检测到变动时更新第二个下拉框可用的option列表。 ```javascript methods:{ fetchSubOptions(parentValue){ this.selectedOptions2 = []; // 清空之前的选择 let tempArr = []; /* 假设这里是从服务器端获取 */ axios.get(`/api/get-sub-options?parent=${parentValue}`) .then(response => { response.data.forEach(element=>{ tempArr.push({ label: element.name, value: element.id }); }); Vue.set(this.options2Map,parentValue,tempArr); }) .catch(error=>console.log(error)); } }, watch: { 'selectedOption1'(newVal){ if(newVal!==''){ this.fetchSubOptions(newVal); }else{ Object.assign(this.$data,this.$options.data()); } } } ``` 上述代码片段展示了如何基于用户交互操作触发异步调用来填充次级选择框内的条目。同时清除了之前的任何遗留选择以保持逻辑一致性。 通过这种方式即可创建出具有两级关联关系且允许多重选取特性的自定义控件组合[^5]。