【Vue】2.ElementUI中el-select多选情况下获取label和value
el-select选中只能获取到value的值,获取不到label的值,所以要循环匹配筛选获取label的值。
·
el-select选中只能获取到value的值,获取不到label的值,所以要循环匹配筛选获取label的值。
html部分:
<!-- 险种筛选框 -->
<div class="one">
<el-form :label-position="labelPosition">
<el-form-item label="险种:" :label-width="formLabelWidth">
<el-select v-model="valueList" multiple placeholder="全选" style="width: 500px" @change="insuranceNameSelect" @remove-tag="removeTagSelect">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
js部分:
export default {
data(){
return {
formLabelWidth:"160px",
labelPosition: "left",
valueList:[],
valueListSelected:[],
options:[
{
value:"1",
label:"家安芯A款"
},
{
value:"2",
label:"家安芯B款"
},
{
value:"3",
label:"家安芯C款"
},{
value:"4",
label:"家安芯D款"
},
{
value:"5",
label:"家安芯E款"
},
{
value:"6",
label:"家安芯F款"
},{
value:"7",
label:"家安芯D款"
},
{
value:"8",
label:"家安芯E款"
},
{
value:"9",
label:"家安芯F款"
},{
value:"10",
label:"家安芯D款"
},
{
value:"11",
label:"家安芯E款"
},
{
value:"12",
label:"家安芯F款"
}],
}
},
methods:{
insuranceNameSelect(val){
console.log(val, '==========险种选中==========');
this.valueListSelected = [];
for(let i =0; i<val.length; i++){
this.options.find(item => { //这里的options就是数据源
if(item.value == val[i]){
this.valueListSelected.push({value:item.value, label:item.label})
}
})
}
console.log(this.valueListSelected, '==========valueListSelected===========');
},
removeTagSelect(tag){
console.log(tag, "=========tag=========");
},
}
}
更多推荐
已为社区贡献20条内容
所有评论(0)