ElementUI select组件下拉选中后同时获取label(name)和value(code)返回给后台

使用说明

ElementUI中select组件，一般只能获到一个vlue值，通过value值把label展示在页面中。如果仅仅做展示用，这没有太大问题。但是涉及到交互，需要把选中的option的名称和code一起再返回给后台就需要多写几行代码了。
话不多说。

代码

<el-form-item label="饺子" prop="zbldid" label-width="70px">
	<el-select v-model="form.zbldid" @change="zbldopt" :disabled="$route.query.code == 2" placeholder="请选择" size="mini" style="width: 100%;" value-key="id" clearable>
		<el-option v-for="item in zbldOptions" :key="item.id" :label="item.zbldmc" :value="item.zbldid"></el-option>
	</el-select>
</el-form-item>

data(){
	return{
		form:{
			zbldid:"",//显示在页面中的option值
			zbldmc:"",//option名称
		}
		zbldOptions:[]//从后台获得的下拉框数据
	}
}
//省略结构，以下是方法
mounted(){
	this.initOptions();//页面初始化的时候调用一下下拉框数据接口
}
methods：{
	initOptions(){//获取饺子下拉选项值
		httpRequest({
			url: 'api/url',
			type: 'GET',
			success: ({data})=>{
				if(data){
					this.zbldOptions = data;
				}
			}
		});
	},
	zbldopt(val){//获取 饺子 点击下拉框value和label
		let resultArr = this.zbldOptions.filter((item)=>{
			return item.zbldid === val
		});
		//把值赋给要传给后台的表单对象中
		this.form.zbldid = resultArr[0].zbldid;
		this.form.zbldmc = resultArr[0].zbldmc;//直接写val也可以
	},
}

嗯，就酱婶儿。