Element-UI el-select 默认值问题,根据另一个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的应用。

你可能感兴趣的:(Vue,前端,vue,elementui)