el-select 同时获取选中的 label 和 value

背景

在业务开发场景中，我们会大量的使用到各种表单组件，其中 el-select 是使用频率最高的组件之一。
此时，有个场景需要 el-select 能够返回当前选中的 value 和 label，value 用于存储，label 用于展示。
但是 el-select 并不支持直接去获取，那只能靠自己处理了。

可用方案

下面列出 3 个常见方案，推荐第一种方案，后两种是常规思路，不优雅。

1、通过组件实例直接获取（推荐💖）

<el-select v-model="value" placeholder="请选择">
    <el-option
      ref="mySelect"
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

<script>
// ElementUI 中使用
const { label, value } = this.$refs.mySelect.selected

// ElementPlus 中使用，除了返回值有点变化，没其它区别
const mySelect = ref()
const { currentLabel: label, value } = mySelect.value.selected
</script>

2、通过拼接 label 和 value 的方式间接获取

<el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="`${item.value},${item.label}`"
    @change="handleChange">
</el-option>

<script>
// 使用的时候，通过 split(',') 拆开取出来即可
handleChange (val) {
  const [value, label] = val.split(",");
}  
</script>

3、手动循环选项数组获取一次

<el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    @change="handleChange">
</el-option>

<script>
// 在 change 事件中通过 find 找到对应的数据
handleChange (val) {
  const label = this.options.find(item => item.value === val).label
}  
</script>

^_^，希望能够帮到你。