vue+element-ui获取select的label和value
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
有俩种方案:
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: '美国'
}
},
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)