(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

相关推荐
你别说话了42 分钟前
Vue项目解决跨域
前端·javascript·vue.js
指尖时光.1 小时前
Three.js 超全入门综合案例
开发语言·javascript·ecmascript
唐青枫1 小时前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript
学习星球4 小时前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
YuJie6 小时前
JSBridge 基础知识
前端·javascript
默_笙6 小时前
🍕 后端接口还没写好,前端已经跑起来了?Mock 数据 + axios 接口层,前后端再也不互相"等"
前端·javascript
爱勇宝6 小时前
客户只想看个页面,我却做了一个静态演示发布系统
前端·javascript·后端
界面开发小八哥9 小时前
界面控件DevExpress Blazor v26.1新版亮点 - Navigation(导航)
javascript·.net·界面控件·blazor·devexpress·ui开发
SendTomo10 小时前
send.wang(私传网)基于网页P2P直连传输大文件的优势
javascript·网络·webrtc·html5·p2p
学习星球11 小时前
Astro 全栈实战:拆解 RealWorld 项目
前端·javascript·架构·系统架构·前端框架·c5全栈