问题描述
我想在选择港口的时候,可以从数据库中拉出这个港口对应的省市区记录赋值给上面三个el-select。
怎么样给el-select赋值才可以让他传值value,显示对应的label
问题出现的环境背景及自己尝试过哪些方法
如果直接赋值item,给后端传值会把这个Object对象传递过去,我只想传一个id过去。
相关代码
粘贴代码文本(请勿用截图)
<el-select
:disabled="isEdit2 ? false : 'disabled'"
style="width: 496px"
v-model="baseform.addressList[0].addressLabel"
v-if="baseform.addressList[0].addressType == 1"
@change="portChange($event, 0)"
filterable
remote
clearable
:loading-text="'查找中'"
placeholder="请输入港口地址"
:remote-method="(query)=>searchPort(query, 0)"
:loading="baseform.addressList[0].loading">
<el-option v-for="item in baseform.addressList[0].addressList"
:key="item.value" :value="item" :label="item.label">
</el-option>
</el-select>
portChange(val, index) {
/*let test = this.$ref.test[index];
console.log(test);*/
/*console.log(val);
console.log('test123');*/
console.log(val);
this.baseform.addressList[index].address = val.value;
this.baseform.addressList[index].addressLabel = val.label;
//改变时将对应id传入,查询中间表是否有相关信息。
getMiddleAddress(val.value, 1).then(res => {
if (res.data.code == 200) {
console.log(index);
//查询到了地址相关信息,中间表关联信息赋值
let data = res.data.data;
//TODO 111
this.baseform.addressList[index].country = data.countryLabel;
this.baseform.addressList[index].province = data.provinceLabel;
this.baseform.addressList[index].city = data.cityLabel;
this.baseform.addressList[index].county = data.countyLabel;
this.baseform.addressList[index].countryLabel = data.countryLabel;
this.baseform.addressList[index].provinceLabel = data.provinceLabel;
this.baseform.addressList[index].countryLabel = data.countryLabel;
this.baseform.addressList[index].cityLabel = data.cityLabel;
}
})
.catch(e => {
//不做改变,在保存的时候将该条地址的省市区中间表更新
//后端返回R.fail时,前端拿到的是异常,要捕获
console.log("没有数据");
});
——————————————
问题已解决,给select添加一条对应的option即可,value-label要对应,有更好的解决方法嘛