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

14 篇文章 0 订阅
本文介绍了如何在Vue项目中,利用Element UI的el-select组件,实现车牌号和加油卡号的联动选择。当选择车牌号时,自动填充与之关联的加油卡号。通过监听change事件,更新v-model的值,结合后台接口获取并设置相关数据,实现了表单数据的智能关联。
摘要由CSDN通过智能技术生成

这里我就不展示完整的代码了,仅展示所用到的代码
附上官方文档的地址: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的应用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值