(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

相关推荐
虚拟世界AI7 小时前
Vue.js安装指南:快速搭建开发环境
vue.js·npm·node.js
紫_龙8 小时前
最新版vue3+TypeScript开发入门到实战教程之watch详解
前端·javascript·typescript
okra-8 小时前
Axure RP 10 进阶指南:从全局变量到JavaScript语法,打造高效原型设计!
javascript·axure·photoshop
默默学前端8 小时前
ES6模板语法与字符串处理详解
前端·ecmascript·es6
lxh01138 小时前
记忆函数 II 题解
前端·javascript
华仔啊9 小时前
除了防抖和节流,还有哪些 JS 性能优化手段?
前端·javascript·vue.js
chenhdowue9 小时前
vue 表格 vxe-table 高亮行支持取消操作
vue.js·vxe-table
这是个栗子9 小时前
【Vue3项目】电商前台项目(四)
前端·vue.js·pinia·表单校验·面包屑导航
前端Hardy9 小时前
Electrobun 正式登场:仅 12MB,JS 桌面开发迎来轻量化新方案!
前端·javascript·electron
叫我一声阿雷吧9 小时前
JS 入门通关手册(20):构造函数与原型:JS 面向对象第一课
开发语言·javascript·前端开发·前端面试·构造函数·js进阶·js面向对象