(vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)

(vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)


后端数据


解决方法

在 el-checkbox 标签中间传入要展示的文本即可,代码如下:

c 复制代码
<el-checkbox-group
  v-model="formInline.processFieldList"
  @change="handleChecked"
>
  <el-checkbox
    v-for="(item,index) in ziduanOptions"
    :key="index"
    :label="item.projectName" //真实获取的值
  >{{ item.projectAbbrName }}</el-checkbox> //展示值
</el-checkbox-group>

解决参考:https://blog.csdn.net/jiangjunyuan168/article/details/135827230

相关推荐
三原21 分钟前
超级好用的三原后台管理v1.0.0发布🎉(Vue3 + Ant Design Vue + Java Spring Boot )附源码
java·vue.js·开源
前端那点事21 分钟前
前端必看!JS高频实用案例(单行代码+实战场景+十大排序)
javascript
之歆21 分钟前
RBAC权限模型设计与实现深度解析
vue.js
前端Hardy1 小时前
前端开发效率翻倍:15个超级实用的工具函数,直接复制进项目(建议收藏)
前端·javascript·面试
前端Hardy1 小时前
Vue 项目必备:10 个高频实用自定义指令,直接复制即用(Vue2 / Vue3 通用)
前端·javascript·vue.js
h_jQuery1 小时前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
懒大王95271 小时前
Vue 2 与 Vue 3 的区别
前端·javascript·vue.js
xuankuxiaoyao1 小时前
vue.js 实践--侦听器和样式绑定
前端·javascript·vue.js
AIBox3651 小时前
openclaw api 配置教程,支持 Claude、Gemini、GPT5.4 等模型
javascript·人工智能·gpt
Rattenking1 小时前
uni-app组件开发----自定义数字键盘组件
前端·javascript·uni-app