element中的select获取选中的 label

因为element中的select组件里的change方法只反回选中的value值，当我们还有获取label时就得采取其他的办法。
一种方法是通过循环判断选中的value，然后筛选出其中的label, 这种方法比较耗费性能；
另一种方法是通过refs获取select的选中值；

<script setup>
import { ref, getCurrentInstance, onMounted, nextTick } from 'vue'
defineProps({
  msg: String
})

const data = ref({
  selectVal: 0,
  dataList: [
    {
      value: 1,
      label: "香蕉"
    },
    {
      value: 2,
      label: "牛奶"
    }
  ],
});
let currentInstance = null
onMounted(() => {
  currentInstance = getCurrentInstance();
})
const handlerSelect = (selectedValue) => {
  nextTick(() => {
     // 这里不加nextTick会获取不到准确的值
    const {selectedLabel} = currentInstance.refs.sel
    console.log('changes', selectedValue, selectedLabel)
  })
}

</script>

<template>
  <div class="container">
    <el-select ref="sel" v-model="data.selectVal" @change="handlerSelect">
      <el-option v-for="(item,index) in data.dataList" :key="index"
      :label="item.label"
      :value="item.value"></el-option>
    </el-select>
  </div>

 
</template>

<style scoped>
a {
  color: #2f624b;
}
.container {
  background: transparent url('@/assets/logo.png') no-repeat;
}
</style>