elementui中select下拉框change选择获取选项的所有字段信息

1.先初始化设置下拉框列表

this.options = [{
  value: '选项1', label: '黄金糕', size: 19, color: '#000'
}, {
  value: '选项2', label: '双皮奶', size: 19, color: '#000'
}, {
  value: '选项3', label: '蚵仔煎', size: 19, color: '#000'
}, {
  value: '选项4', label: '龙须面', size: 19, color: '#000'
}, {
  value: '选项5', label: '北京烤鸭', size: 19, color: '#000'
}]

2.添加一个对象变量optionsObj，将列表数据以对象形式储存（键名：数据的id，键值：id对应的选项信息）

this.optionsObj = {} //清空

this.options.map(item=>{
  this.optionsObj[item.value] = {...item}
})

3.下拉框chang事件选择的时候，通过id在optionsObj取出选项信息

change(e){
  console.log( e, this.optionsObj[e])
}

完整代码

<template>
  <div class="Home">
    <el-select v-model="value" placeholder="请选择"
      @change="change"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
      options: [],//下拉框列表
      value: '',//当前选中值
      optionsObj: {},//以对象形式存数据
    }
  },
  created(){
    this.setOptions()
  },
  methods: {
    /** 设置下拉框数据 */
    setOptions(){
      this.options = [{
        value: '选项1', label: '黄金糕', size: 19, color: '#000'
      }, {
        value: '选项2', label: '双皮奶', size: 19, color: '#000'
      }, {
        value: '选项3', label: '蚵仔煎', size: 19, color: '#000'
      }, {
        value: '选项4', label: '龙须面', size: 19, color: '#000'
      }, {
        value: '选项5', label: '北京烤鸭', size: 19, color: '#000'
      }]

      this.optionsObj = {} //清空
      
      this.options.map(item=>{
        this.optionsObj[item.value] = {...item}
      })
    },
    /** 下拉框选择事件 */
    change(e){
      console.log( e, this.optionsObj[e])
    }
  }
}
</script>