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