el-select组件同时输出label和name的值，这优雅不？--vue3+ts

el-select组件同时输出label和name的值，实现的方法很多，有添加value-key=‘xxx’，有通过@change获取输出赋值（其实也差不多）。
试试的我方法：input隐藏域

附代码及结果：

<template>
  结果：{{ formInline }}
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="optionName">
      <el-select
        v-model="formInline.optionVal"
        placeholder="Select"
        size="small"
        style="width: 240px"
      >
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 隐藏于赋值Name -->
      <input
        type="hidden"
        :value="
          (formInline.optionLab = options.find(
            (o:any) => o.value == formInline.optionVal
          )?.label || '')
        "
      />
    </el-form-item>
    <el-form-item label="dateRange">
      <el-date-picker
        v-model="formInline.dateRange"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      <!-- 隐藏域分别赋值开始日期，结束日期 -->
      <input
        type="hidden"
        :value="
          ((formInline.startDate = formInline.dateRange[0] || ''),
          (formInline.endDate = formInline.dateRange[1] || ''))
        "
      />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const formInline = reactive({
  optionVal: "",
  optionLab: "",
  dateRange: "",
  startDate: "",
  endDate: "",
});

const options = [
  {
    value: "val1",
    label: "label1",
  },
  {
    value: "val2",
    label: "label2",
  },
  {
    value: "val3",
    label: "label3",
  },
];
</script>

若项目是vue3+ts+element-plus全局，可直接粘贴代码测试

这种写法，不知道有没有什么弊端？懂的大佬，求教求教！

---

写在最后，有想法可以一起交流交流，欢迎各位大佬洽谈交流
【前端学习社区交流群】