【Vue】2.ElementUI中el-select多选情况下获取label和value

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=========");
        },
    
    }
}

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值