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,如图

相关推荐
恋猫de小郭几秒前
React Native 前瞻式重大更新 Skia & WebGPU & ThreeJS,未来可期
android·javascript·flutter·react native·react.js·ios
shmily麻瓜小菜鸡9 分钟前
vue3使用tailwindcss报错问题
开发语言·前端·javascript·vue.js
帆张芳显13 分钟前
前端EXCEL插件,智表ZCELL产品V3.0 版本发布,底层采用canvas全部重构,功能大幅扩展,性能极致提升,满足千万级单元格加载
前端·重构·excel·jquery·插件·智表
神仙别闹18 分钟前
基于HTML+JavaScript+CSS实现教学网站
javascript·css·html
python_chai30 分钟前
CSS从入门到精通:全面解析CSS核心知识体系
前端·css
会飞的鱼先生2 小时前
vue3的深入组件-组件 v-model
前端·javascript·vue.js
2401_837088503 小时前
CSS opacity
前端·css
Lysun0013 小时前
(pnpm)引入 其他依赖失败,例如‘@element-plus/icons-vue‘失败
前端·javascript·npm·pnpm
花花鱼3 小时前
spring boot lunar 农历的三方库引用,获取日期的农历值
java·前端·spring boot
fly spider3 小时前
1.短信登录
前端·firefox