element里面select组件v-model显示的是value的值,在实际的开发中经常需要同时向后端传递value和label的值
html
<el-form-item label="所属城市:" prop="city">
<el-select v-model="addProductForm.city.city1" placeholder="请选择省份" size="small" style="width:220px;margin-right: 20px;" @change="selectCity">
<el-option v-for="item in province" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
<el-select v-model="addProductForm.city.city2" placeholder="请选择城市" size="small" style="width:220px;">
<el-option v-for="item in cities" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
JS
data中声明
addProductForm: {
city: {
city1: '',
city2: ''
}, // 所属城市
},
methods
methods: {
// 查询省/直辖市
async findprovince() {
const option = {
// ...接口请求参数
}
const res = await findCities(option)
if (res.code === 200) {
this.province = res.data
}
},
// 监听省 选择城市
async selectCity(e) {
this.cities = []
this.addProductForm.city.city2 = '' // 每次选择完省 将市置空
const option = {
// ...接口请求参数
// 选择城市一般还有把选择的省id(e)传给后端
}
const res = await findCities(option)
if (res.code === 200) {
this.cities = res.data
}
},
confirm() {
// 获取省市名称
// element-select选择器 通过value获取label的值 将value和label都传给后端
let cityName1 = {
}
cityName1 = this.province.find((item) => item.id === this.addProductForm.city.city1)
this.addProductForm.provinceName = cityName1.name
let cityName2 = {
}
cityName2 = this.cities.find((item) => item.id === this.addProductForm.city.city2)
this.addProductForm.cityName = cityName2.name
const option = {
provinceId: this.addProductForm.city.city1,
provinceName: this.addProductForm.provinceName,
cityId: this.addProductForm.city.city2,
cityName: this.addProductForm.cityName
}
}
}