Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label

最近刚进行 Vue3 + Element plus 项目实践,在进行表单二次封装的时候,表单元素 select 下拉框组件选中一个选项后显示的是 value 而不是 label,下面上代码:

原来的写法:

javascript 复制代码
<el-select
  v-if="v.type === 'select'"
  v-model="formModel[v.id]"
  :placeholder="v.placeholder"
  clearable
>
  <el-option
    v-for="(item, i) in v.option"
    :value="item.value"
    :key="`${i}${v.value}`"
  >
    {{item.label}}
  </el-option>
</el-select>

这样写,选中一个选项 "是" 后,下拉框中显示的一直是 value---1,而不是 label---是,如图:

修改后的写法:

javascript 复制代码
<el-select
  v-if="v.type === 'select'"
  v-model="formModel[v.id]"
  :placeholder="v.placeholder"
  clearable
>
  <el-option
    v-for="(item, i) in v.option"
    :label="item.label"
    :value="item.value"
    :key="`${i}${v.value}`"
  />
</el-select>

这样写,选中一个选项 "是" 后,下拉框中显示的是 label---是,而不是 value---1,如图

相关推荐
前端Hardy1 分钟前
HTML&CSS:高颜值视差滚动3D卡片
前端·javascript·html
前端无涯4 分钟前
Vue---vue使用AOS(滚动动画)库
前端·javascript·vue.js
前端Hardy5 分钟前
HTML&CSS:超好看的数据卡片
前端·javascript·html
牧码岛6 分钟前
Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility
前端·css·vue·html·web·web前端
CUIYD_19899 分钟前
Vue 中组件命名与引用
javascript·vue.js·node.js
面朝大海,春不暖,花不开10 分钟前
Spring Boot MVC自动配置与Web应用开发详解
前端·spring boot·mvc
知否技术10 分钟前
2025微信小程序开发实战教程(一)
前端·微信小程序
孙 悟 空11 分钟前
ArcGIS Maps SDK for JavaScript:使用图层过滤器只显示FeatureLayer的部分要素
javascript·arcgis
玲小珑12 分钟前
Auto.js 入门指南(五)实战项目——自动脚本
android·前端
Sparkxuan12 分钟前
IntersectionObserver的用法
前端