有俩种方案:
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: '美国'
                    }
      },
GitHub 加速计划 / eleme / element
14
2
下载
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 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐