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

vue项目 解决有多个el-select需要联动时,调用混乱痛点写一堆handleA/handleB/handleC重复代码、层级越多越乱切换、回显两套逻辑分开维护容易出错。核心思路用 watch 监听选中值统一触发下级数据加载所有联动逻辑收敛一处不用在每个change写业务。整体设计下拉选中值统一放在form对象每一级选项数组、loading统一命名规范watch监听上级选中值自动刷新下级清空下级值抽通用异步加载方法loading、异常处理change 只做一件事赋值甚至可以不写 changev-model 自动触发 watch编辑回显串行执行复用同一套加载逻辑无重复代码。html!-- A一级 --el-selectv-modelform.aplaceholder请选择A:loadingloading.ael-optionv-foritem in opt.a:keyitem.id:labelitem.name:valueitem.id//el-select!-- B二级依赖A --el-selectv-modelform.bplaceholder请选择B:loadingloading.b:disabled!form.a || opt.b.length 0el-optionv-foritem in opt.b:keyitem.id:labelitem.name:valueitem.id//el-select!-- C三级依赖B --el-selectv-modelform.cplaceholder请选择C:loadingloading.c:disabled!form.b || opt.c.length 0el-optionv-foritem in opt.c:keyitem.id:labelitem.name:valueitem.id//el-selectdatadata(){return{form:{a:,b:,c:},// 各级下拉选项opt:{a:[],b:[],c:[]},// 加载状态防止重复请求loading:{a:false,b:false,c:false},// 层级顺序用于批量清空下级levelList:[a,b,c]}},created(){// 初始化加载一级Athis.getList(a)}methodsmethods:{/** * 通用请求下拉数据 * param level 当前层级 a/b/c * param parentVal 上级选中值 */asyncgetList(level,parentValnull){// 接口映射新增层级只在这里加一行constapiMap{a:this.$api.getAList,b:this.$api.getBList,c:this.$api.getCList}constapiapiMap[level]if(!api)returnthis.loading[level]truetry{letresif(levela){// 一级无父参数resawaitapi()}else{// 二级/三级带上级ID请求resawaitapi({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){constindexthis.levelList.indexOf(level)if(index-1)return// 遍历下级全部清空for(letiindex1;ithis.levelList.length;i){constkeythis.levelList[i]this.form[key]this.opt[key][]}// 清除表单校验红提示this.$refs.form?.clearValidate()},/** * 编辑回显入口串行加载下级数据 */asyncsetEditRow(row){const{a,b,c}row// 赋值Awatch自动清空并请求Bthis.form.aaawaitthis.$nextTick()awaitthis.getList(b,a)// 赋值Bwatch自动清空并请求Cthis.form.bbawaitthis.$nextTick()awaitthis.getList(c,b)this.form.cc}}watchwatch:{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)}}