vue+element-ui获取select的label和value

有俩种方案:
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: '美国'
                    }
      },

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值