企业官网建设流程全解析

vue项目 解决有多个el-select需要联动时,调用混乱

痛点：写一堆handleA/handleB/handleC重复代码、层级越多越乱；切换、回显两套逻辑分开维护容易出错。

核心思路：用 watch 监听选中值，统一触发下级数据加载，所有联动逻辑收敛一处，不用在每个@change写业务。

整体设计

1. 下拉选中值统一放在form对象；
2. 每一级选项数组、loading统一命名规范；
3. watch监听上级选中值自动刷新下级，清空下级值；
4. 抽通用异步加载方法，loading、异常处理；
5. change 只做一件事：赋值（甚至可以不写 change，v-model 自动触发 watch）；
6. 编辑回显串行执行，复用同一套加载逻辑，无重复代码。

• html

<!-- A一级 --><el-selectv-model="form.a"placeholder="请选择A":loading="loading.a"><el-optionv-for="item in opt.a":key="item.id":label="item.name":value="item.id"/></el-select><!-- B二级依赖A --><el-selectv-model="form.b"placeholder="请选择B":loading="loading.b":disabled="!form.a || opt.b.length === 0"><el-optionv-for="item in opt.b":key="item.id":label="item.name":value="item.id"/></el-select><!-- C三级依赖B --><el-selectv-model="form.c"placeholder="请选择C":loading="loading.c":disabled="!form.b || opt.c.length === 0"><el-optionv-for="item in opt.c":key="item.id":label="item.name":value="item.id"/></el-select>

• data

data(){return{form:{a:"",b:"",c:""},// 各级下拉选项opt:{a:[],b:[],c:[]},// 加载状态，防止重复请求loading:{a:false,b:false,c:false},// 层级顺序，用于批量清空下级levelList:["a","b","c"]}},created(){// 初始化加载一级Athis.getList("a")}

• methods

methods:{/** * 通用请求下拉数据 * @param level 当前层级 a/b/c * @param parentVal 上级选中值 */asyncgetList(level,parentVal=null){// 接口映射，新增层级只在这里加一行constapiMap={a:this.$api.getAList,b:this.$api.getBList,c:this.$api.getCList}constapi=apiMap[level]if(!api)returnthis.loading[level]=truetry{letresif(level==="a"){// 一级无父参数res=awaitapi()}else{// 二级/三级带上级ID请求res=awaitapi({parentId:parentVal})}this.opt[level]=res.data||[]}catch(err){console.error(`${level}下拉请求失败`,err)this.opt[level]=[]}finally{this.loading[level]=false}},/** * 清空当前层级之后所有下级的值和选项 * @param level 当前操作层级 */clearChild(level){constindex=this.levelList.indexOf(level)if(index===-1)return// 遍历下级全部清空for(leti=index+1;i<this.levelList.length;i++){constkey=this.levelList[i]this.form[key]=""this.opt[key]=[]}// 清除表单校验红提示this.$refs.form?.clearValidate()},/** * 编辑回显入口，串行加载下级数据 */asyncsetEditRow(row){const{a,b,c}=row// 赋值A，watch自动清空并请求Bthis.form.a=aawaitthis.$nextTick()awaitthis.getList("b",a)// 赋值B，watch自动清空并请求Cthis.form.b=bawaitthis.$nextTick()awaitthis.getList("c",b)this.form.c=c}}

• watch

watch:{"form.a"(val){// 切换A，清空B、Cthis.clearChild("a")if(!val)return// 请求B列表this.getList("b",val)},"form.b"(val){// 切换B，清空Cthis.clearChild("b")if(!val)return// 请求C列表this.getList("c",val)}}