需要获取Select选中的option的其它值
<span class="span-box">车牌号</span>
<el-select class="el-input box" v-model="subData.plate" remote filterable placeholder="请选择" :remote-method="remoteCar" @change="getAddPlateObj">
<el-option v-for="item in carslist"
:key="item.vid"
:label="item.plate"
:value="item.plate">
</el-option>
</el-select>
// option涉及的字段
{
plate: "粤Axxxxx-蓝"
platecolor: "蓝"
plateno: "粤Axxxxx"
vid: "123342134"
}
remoteCar() 方法主要是用来进行即时搜索,示例如下:
// 车辆下拉框输入值改变
remoteCar(query){ //query为当前输入的字符
// 获取车辆列表
this.getcarlist(query)
},
getcarlist(query){
// 查询条件车辆列表接口
HttpServer.get('接口地址和请求参数').then(res=>{
console.log(res)
this.carslist = res.data.records //将新查询到的车辆数据赋值与carslist数组
// 在列表第一项插入空值
this.carslist.unshift({'plate':'请选择','vid':''});
}
)
},
//下拉框选中事件,假设需要获取选中Option的 vid 和 plateno
getAddPlateObj(plate){
let obj = {};
obj = this.carslist.find((item)=>{ //这里的carslist就是上面遍历的数据源
return item.plate === plate;//筛选出匹配数据
});
console.log(obj); //obj即是选中的Option数据集合
//获取到选中的Option数据集并进行其它操作
this.subData.vid = obj.vid;
this.subData.plateno = obj.plateno;
},
附上参考链接: