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

最新推荐文章于 2024-12-03 09:50:04 发布

原创

最新推荐文章于 2024-12-03 09:50:04 发布 · 552 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

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="formI