首页 / 脚本样式 / Element UI / ElementUI select组件下拉选中后同时获取label(name)和value(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也可以

},

}