Element-UI el-select 默认值问题，根据另一个select选项的变化修改【已解决】

布满荆棘的人生 2022-09-04 10:54 6阅读 0赞

这里我就不展示完整的代码了，仅展示所用到的代码  
附上官方文档的地址：[https://element.eleme.cn/\#/zh-CN/component/select][https_element.eleme.cn_zh-CN_component_select]

首先看一下我们需要进行修改的两个select

<el-col :xs="33" :sm="33" :lg="12" >
      <el-form-item label="加油卡号" prop="fuelCardId">
        <el-select v-model="fuelCardId" filterable clearable placeholder="请选择" style="width: 100%;" @change="changeOilcard">
          <el-option v-for="item in oilcardOption" :key="item.id" :label="item.oilcardNo" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    
    <el-row :gutter="80">
      <el-col :xs="33" :sm="33" :lg="12" >
        <el-form-item label="车 牌 号" prop="vehicleId">
          <el-select v-model="vehicleId" :disabled="disabledValue" filterable clearable placeholder="请选择" style="width: 100%;" @change="changeVehicleId" @focus="focusVehicleId">
            <el-option v-for="item in vehicleOption" :key="item.id" :label="item.plateNumber" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

**业务需求**：现在车牌号和加油卡号是进行绑定的，可以通过服务端接口查找到二者的关联关系，每次当我们选中车牌号时会默认选中与车牌号相关联的加油卡，对加油卡也是相同的操作。

**处理思路**：  
我们用到的就是select的v-model，我们通过对v-model进行赋值（value），首先我们的data中要有vehicleId和fuelCardId，并在select中v-model

data(){ 
    	vehicleId: '',
      fuelCardId:''
    }

当changeVehicleId事件被触发后，判断是否选择了车牌号，如果选择了车牌号，判断当前表单中加油卡号的id是否为空，若不为空则将通过后台查出来的与车牌号对应的卡号进行赋值。下面展示一下代码，根据业务需求不同，代码的实现也会有些许差别，这里主要是提供一个方法。  
**具体实现**

//车牌号切换事件 
    changeVehicleId(currentValue){ 
      	//判断当前是否选择了加油卡，若选择加油卡则不进行操作
          if (this.form.fuelCardId === '' || this.form.fuelCardId === undefined || this.form.fuelCardId === null){ 
            //这里可以加一层判断，如果currentValue为空 则不进行下面的处理
            let params = new Object();
            params.vehicleId = currentValue
            getOilCard(params).then(res =>{  //查询加油卡和车辆的关联关系
              //查询到结果，则进行赋值操作
              if (res.code === 200 && res.result !== null && res.result.vehicleId !== ''){ 
                this.form.fuelCardId = res.result.id
              }else { 
                //自定义消息提示方法，可以忽略 使用element的即可
                publicJS.showMessage(res.message,publicJS.ErrorType)
              }
            });
          }

对选择车辆时自动关联加油卡号也是同样的操作，这里就不进行演示了。

代码写的不太规范，个人前端也是刚开始学习，仅学习我需要分享的思路就可，主要就是v-model的应用。

[https_element.eleme.cn_zh-CN_component_select]: https://element.eleme.cn/#/zh-CN/component/select