vue项目中下拉选择器el-select，选中某一项后如何同时获取其label、value以及其他值

最终实际效果如下：

代码如下：

<template>
  <div>
    <el-select v-model="fruit" @change="handleChange">
      <el-option
        v-for="item in selectList"
        :key="item.whsCode"
        :label="item.fruitName"
        :value="item.fruitEnName"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruit: "",
      selectList: [
        { fruitName: "F-abc", fruitEnName: "apple" },
        { fruitName: "F-ACD", fruitEnName: "orange" },
      ],
    };
  },
  methods: {
    handleChange(val) {
      //传进来的val是select组件选中的value值，也就是一个fruitEnName
      var obj = {};
      obj = this.selectList.find(function(item) {
        return item.fruitEnName === val;
      });
      //obj 就是被选中的那个对象，也就能拿到label值了。
      console.log(obj.fruitName); //label值
      console.log(val); //value值
    },
  },
};
</script>