一、elementui的下拉框官方文档只有获取一个的值
<el-form ref="form" :model="form" label-width="180px">
<el-form-item label="屠宰费标准:">
<el-select v-model="form.slaughter_baseline" placeholder="请选择" @change="selectfcn">
<el-option v-for="item in bucher" :key="item.charge" :label="item.charge" :value="item.charge"></el-option>
</el-select>
</el-form-item>
</el-form>
二、用一个数组装下拉的要选择的数据 bucher,再写一个change匹配出相应的数据。
export default {
data() {
bucher: [],//下拉数据源
form: {
slaughter_baseline: '', //屠宰费
slaughter_guid:'', //屠宰guid
}
},
methods: {
//获取屠宰费标准
getbucher() {
this.$axios.get('url').then(response => {
this.bucher = response.data.obj.records;
console.log('bucher', this.bucher);
});
},
//每当选择change时触发
selectfcn(e) {
let obj = {};
obj = this.bucher.find(item => {
//这里的bucher就是上面遍历的数据源
return item.charge === e; //筛选出匹配数据
});
console.log(e); //获取的 id
//this.form.slaughter_guid=e;
this.form.slaughter_guid=obj.sguid;
console.log('aa',this.form.slaughter_baseline);//获取的 name
console.log('bb',this.form.slaughter_guid);//获取的 name
},
},
mounted() {
this.getbucher();
}
}
三、效果以及图片:
(1)数据源图片
(2)效果图
(3)console的结果