ElementUI中获取select 的label值

时间:2019-04-19
本文章向大家介绍ElementUI中获取select 的label值,主要包括ElementUI中获取select 的label值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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