vue element el-select 同时获取value和label的值

vue element el-select 同时获取value和label的值

在工作中有些场景可能会需要同时获取value和label的值

<el-form-item>
        <el-select
          v-model="shutId"
          @change="handleChange"
          filterable
          placeholder="请选择关卡"
        >
          <el-option
            v-for="item in shuts"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

export default data() 数据如下

 data() {
    return {
    
      optionList: [{id:1,name:‘龙珠’},{id:2,name:'三国'}],

 
    };
  },

@handleChange 方法内部代码

 handleChange(val){
     var obj={}
     obj = this.optionList.find(function(item){
        return item.id === val
      })
  console.log(obj.name)
  console.log(obj.val)

   },

1. 首先定义@handleChange 方法
2. val 此时的值为 :value=“item.id” 的值
3. 遍历optionList 通过val 找到对应的对象返回给 obj对象
4. 通过obj对象.属性来获取labe的值 :label=“item.name” 此时labe 为item.name 属性为name 所以获取laba的值 就是obj.name