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

最新推荐文章于 2025-04-02 10:58:41 发布
最新推荐文章于 2025-04-02 10:58:41 发布
阅读量3.5k 收藏 10
点赞数 16
分类专栏： 前端 vue element-ui 文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jiangjunyuan168/article/details/135827230
版权
文章介绍了如何在ElementPlus的el-checkbox组件中，使用插槽功能实现选中的key值存储和显示的value值不同。通过v-for遍历statusList并设置label为key，实际选中时存储的是key而非value。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

elementplus 的 el-checkbox 官方代码中的多选框组实例如下：

在这里插入图片描述

上方代码中选中哪个选项就会往 checkList 数组中加入选项的 label 值，如果需要实现展示的值与选中的值不一样要怎么实现呢？

解决方法

el-checkbox组件中存在插槽，只需要在 el-checkbox 标签中间传入要展示的文本即可，代码如下：

<el-checkbox-group v-model="status">
    <el-checkbox 
        v-for
最低0.47元/天 解锁文章
【vue项目】element-checkbox多选框 显示label，接口传递value值
Aohanzzz的博客
09-07 2467
element-checkbox复选框 显示label，接口传递value值
el-checkbox实现月份选择变化，checked动态调整显示状态,动态改变多选框的选项问题，并且拿到选项值
qq_41180882的博客
10-27 2190
在table表格中，再次进行月份遍历，下方有月份的table数组，由于月份后端返回代码，所以前端做了调整 ， @change这里的内容是当选择变化是触发函数，分别内容是，触发的内容，触发的本表格的遍历的月份，索引和对应的本行内容。方法：前端通过拿到的数据，寻找到本条数据的父级元素，再利用父级元素内的内容，来改变本行内容的数据 ，这里的obj就是选项找到的内容。在data中固定的数据，与后端做对应。
el-checkbox同时获取label和value
楚楚梦厦的博客
12-26 2826
多选框(组)的场景下，有很多展示给用户的是文字，但是传参给后端的是英文字段这样的需求。即同时获取el-checkbox的label和value字段
Vue：设置CheckBox默认值
最新发布
MMF博客园
04-02 397
Vue：设置CheckBox默认值
(vue)el-checkbox 实现展示区分 label 和 value（展示值与选中获取值需不同）
nyf_unknow的博客
02-29 1408
【代码】(vue)el-checkbox 实现展示区分 label 和 value（展示值与选中获取值需不同）
el-checkbox如何同时获得value值和label的值
qq_44170622的博客
10-17 976
el-checkbox如何同时获得value值和label的值
ElementUI 多选框取值用 value，展示用 label
Dreamy_LIN的博客
11-08 3627
多选框： label 绑定选中值（返回值），value 绑定展示内容 <el-checkbox-group v-model="status"> <el-checkbox v-for="(value, key) in checkData" :key="key" :label="key" > {{ value }} </el-checkbox> </el-checkbox-grou
elementui Checkbox label值与所需要显示的值不一致
weixin_51281841的博客
10-06 4398
elementui的Checkbox组件在多选框组的情况下，想要传给后端的值与所想要展示的值不一致时，如： <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled> <el-checkbox label="备选项1" border></el-checkbox> <el-checkbox label="备选项2" border></el-checkbox> </e
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
<el-checkbox :label="item2.id" v-for="item2 in item1.values" :key="item2.id">{{ item2.value }}</el-checkbox> </el-checkbox-group> </el-form-item> ``` 问题在于，当用户点击动态生成的复选框时，预期是...
vue 获取el-cascader选中的label值
且听风吟的博客
11-13 1万+
通常 el-cascader 绑定的model值是选中的id，有时候需要获取选中的label值，可以用以下的方法： <template> <div class="container"> <span>分类：</span> <el-cascader ref="cascaderMallCatergory" v-model="mallCatergoryCode" @change="handleMallCatergoryChange" :o
el-checkbox选中后的值为id，组件显示为label中文
weixin_43923808的博客
05-11 640
【代码】el-checkbox选中后的值为id，组件显示为label中文。
Vue+element Ui的el-select同时获取value和label的方法总结
蓝胖子的博客
07-27 1457
Vue+element Ui的el-select同时获取value和label的方法总结
el-checkbox的 v-modle、value、checked控制其选中状态区别
热门推荐
weixin_52137696的博客
12-22 12万+
控制el-checkbox的checked属性值无法控制其选中状态
el-checkbox-group设置value和label
weixin_45966674的博客
03-09 7004
后端要的是一个value的数组 而我们展示要用label。文档只写了一种显示什么提交的数据就是什么的写法。但后端有时返回给我们的是这样的数据。'LibreOffice服务'这样就能实现展示和取值的分离了。'Memcached服务'那么我们页面可以这样写。
[el-checkbox] [API] label act as value is about to be deprecated in version 3.0.0, please use value
lotpyve的博客
10-28 3115
这个错误主要是发生在 element-plus 的 el-checkbox 中，原因是 element-ui 和 element-plus 的 el-checkbox 组件有所改变。之前的 label 属性可以作为 值 来进行选项，现在得换成 value 了。这是 element-plus 的说明。
ElementUI的el-checkbox的自定义使用
两年半前端练习生的博客
11-15 2943
【代码】ElementUI的el-checkbox的自定义使用。
Vue复选框、下拉框使用案例，复选框选项元素（el-checkbox）换行竖向显示
hkl_Forever的博客
07-21 7352
【3】整个复选框一系列函数案例。1、下拉框初始化案例代码。
elementUI使用checkboxgroup组件，获得value的数字集合，而不是label的文字集合 - 解决篇
草巾冒小子的博客
07-21 1万+
全部代码如下： <template> <div id="htmlWrap" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)...
Element-ui 的el-checkbox，绑定label但不显示内容
z989ccc的博客
07-13 1920
Element-ui中el-checkbox关于绑定值而不显示内容的方式
el-checkbox同时获取value和label
03-24
可以使用 v-model 绑定 value 和 label，这样 el-checkbox 就可以同时获取两个值了，比如： ``` <el-checkbox v-model="checkedValues" :label="item.value" :value="item.label">{{ item.label }} </el-checkbox> ``` 在这个例子中，item.value 就是 el-checkbox 的 value，item.label 就是 el-checkbox 的 label，同时绑定到 checkedValues 上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值