有俩种方案:
1、可以通过对option里value 属性的赋值,得到想要的结果值(适用于多选和单选,多选则在 中添加multiple,可以参看element官网);
代码如下:
let selectionOption = [{
value: 1,
label: '中国'
},{
value: 2,
label: '美国'
},{
value: 3,
label: '英国'
},{
value: 4,
label: '澳大利亚'
}];
<el-select
@change='handleChange'
v-model="selectVal"
placeholder="请选择"
>
<el-option
v-for="item in selectionOption"
:label="item.label"
:value="item.value" //这里赋值是**item.lvaue**,那么v-model里的selectVal 将会得到选中对象的value,如果赋值为**item**,将会得到选中的对象,例如:{value:2,label:'美国'},同时,v-model得到也是一个对象,可以在change事件里将返回的值分别赋予需要的变量;
:key="item.value"
>
</el-option>
</el-select>
<script>
export default {
data() {
return {
selectVal: this.value || '',
reasonTypes : [{
value: 1,
label: '中国'
},{
value: 2,
label: '美国'
},{
value: 3,
label: '英国'
},{
value: 4,
label: '澳大利亚'
}]
};
},
methods: {
//需要将返回对象的值拆分,可以使用chang函数
handleChange(data) {
//如果上面:value赋的是对象,则可以将返回的对象赋予其他变量,这里的data是选中的对象,那么data.label则是reasonTypes中的label值,如果下拉中选中美国,那么this.selectVal 值为“美国”
this.selectVal = data.label
},
},
};
</script>
2、option里:value 没有赋值为对象时,(也就是这样赋值:value="item.value"而不是:value="item"时,不理解看上面注释),也可以在change方法中得到选中的对象;
1)多选情况:
handleChange(val) {
let resultArr= this.reasonTypes.filter((ele,index,arr)=>{
return val.some(item=>{return item===ele.value});
});
},
2)单选情况:
handleChange(val) {
let resultArr= this.reasonTypes.filter((ele,index,arr)=>{
return ele.value === val
});
//这个方法得到的是数组对象,例如:[{
value: 2,
label: '美国'
}]
},
handleChange(val) {
let resultArr = this.reasonTypes.find((item)=>{
return item.value === val;
});
//这个方法得到的是对象,例如:{
value: 2,
label: '美国'
}
},