【vue项目】element-checkbox多选框 显示label，接口传递value值

已于 2022-09-07 11:27:50 修改
阅读量2.2k 收藏 2
点赞数
分类专栏： vue项目 文章标签： vue.js 前端
于 2022-09-07 09:04:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aohanzzz/article/details/126717946
版权
本文介绍了在Vue项目中使用Element-UI的多选框遇到的问题，当前端传递字符串类型值给后端时，由于类型不匹配导致JSON解析错误。为了解决这个问题，提出了在多选框中添加ID，并传递ID值作为整型到后端的方法，以确保数据类型的正确匹配。
摘要由CSDN通过智能技术生成

element上多选框的值和标签都存放在一个数组里
存放的类型是String在这里插入图片描述
当直接向后端传递

['上海', '北京']

显示报错信息：

"Error: 系统故障，请稍后重试或联系管理员[JSON parse error: Cannot deserialize value of type int from String “上海”: not a valid int value; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type int from String “上海”: not a valid int value

这是JSON解析错误，前端传过来的值与后端值类型不匹配
传递的是String类型，后端要存放int类型
想到要给复选框加id
传递id值

html

<el-form-item label="城市：" prop="objectContactType">
	<el-checkbox-group
最低0.47元/天 解锁文章
Aohan-z
关注
专栏目录
Vue3 - Element Plus 组件库让 [el-radio 单选框] 与 [el-checkbox 复选框] 由 “横向排列“ 改为 “纵向排列“ 显示（将单选框/多选框设置为纵向排列效果）
王佳斌
08-16 2950
vue3 element plus组件库，vue3 el-radio 单选框 el-checkbox 复选框改成纵向排序排列，vue3 element plus 单选框el-radio如何改为纵向排列，vue3 el-radio单选框设置成纵向横排，vue3如何把element plus el-checkbox多选框复选框改成并列纵向排放，element plus 单选框复选框如何竖着排列，vue3 element plus 单选框el-radio/复选框el-checkbox如何把每个选项另起一行显示，e
element-plus的form表单组件之checkbox组件
最新发布
lucky_ly的博客
06-18 326
单个checkbox 绑定的响应式的值类型为bool类型，同一个组的checkbox多选其值对应值的数组，类型根据checkbox的value值而来。checkbox结合button展示等，是否有边框，是否禁用等。label只用来显示具体的值，根据value属性来设置。element-plus的checkbox提供多种特性。限制最小选的，和最大选择数量。
element el-checkbox-group 的用法
web18224617243的博客
02-25 3520
el-checkbox的lable的用法很关键。 lable对应的是v-model绑定的数组里的对象。 例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。 data定义: sendTypeList: [{ value: 1, label: "手机短信" }, { value: 2, label: "邮箱" }, ],
【vue+antd-vue】a-table+a-checkbox,多选框勾选传参，传入重复的值，取最后一次勾选后的值传参
花椒和蕊的博客
09-30 2954
当勾选完点确认按钮调接口的时候，要拿每一勾选项当前行的值。所以要循环勾选的值，在循环里追加值到新数组里。 在table中加入这一行，就可以出现第一列是复选框 :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" selectedRowKeys: [], selectedRows: [], messageTypes: [], //新增用户参数数组 .
vue element提交表单时把el-checkbox多选框选中的值传入后台的方法
wjw_de_java的博客
01-25 5768
方法一： 代码实现： <el-row type="flex" class="row-bg"> <el-col :span="11" :offset="0" > <el-form-item label="地点" prop="warrantName" label-width="150px"> <el-checkbox-group v-model="wa
(vue)el-checkbox 实现展示区分 label 和 value（展示值与选中获取值需不同）
nyf_unknow的博客
02-29 928
【代码】(vue)el-checkbox 实现展示区分 label 和 value（展示值与选中获取值需不同）
element-ui plus v2.60 终于修复了 radio checkbox 取值不明确的问题，label value 值
学习笔记
03-06 1394
昨天想反馈这个关于 label 和 value 的问题的时候，发现新版本已经修正这个问题了。
element ui 多个el-checkbox多选框用法
qq_38502227的博客
11-13 6139
效果图： <div class="permissions-information-content" v-for="(data, index) in newJurisdictionData" :key="data.id" > <el-checkbox :label="data.code" @change="checkAllChildren($event, data, ind
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
Element UI是一个常用的前端组件库，它的`el-checkbox`组件用于创建复选框。然而，当我们尝试使用v-model动态绑定数据时，可能会遇到一些问题。本文将探讨在Vue中动态生成`el-checkbox`并解决点击无法正确赋值的难题...
拜读及分析Element源码-checkbox多选框组件篇
weixin_34234823的博客
09-11 1539
element源码分析-checkbox多选框，感觉逻辑跟单选框很像，来看看吧。 checkbox多选框和单选框一样也分为三部分 checkbox-group：适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。 checkbox：多选。 checkbox-button： 按钮样式的多选。 checkbox-group 相当于把checkbox和checkbo...
element-ui添加复选框并把选中的列表中的数据传入后台
qq_40950903的博客
05-28 3660
需求描述 把前端选中的的数据传入后台。 关键代码 <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"style="width: 100%;"> <el-table-column type="selection" header-align="center" align="center" width="50" :select.
checkbox的value绑定了Vue上的实例后,如何正确传给后台值？1 代表选中，0 代表未选中
Haines
08-24 5355
&lt;input type="checkbox" id="checkbox" v-model="toggle"&gt; &lt;label for="checkbox"&gt;{{ toggle ? '选中' : '未选中' }}&lt;/label&gt; new Vue({ el: '#form-1', data: { toggle: true }
antd vue 多选框的全选功能实现和选中时候传入值的改变
动感超人的博客
10-28 1754
原理就是监听全选按钮的选中状态,设置相应的回调就可以。indeterminate是什么?
vue elementUI el-select 同时获取label 和 value 的值 并传给后端
weixin_44635748的博客
06-01 1775
如果 这里中的小红框封装的太深的话 ,一图中的index , 就需要添加 , 如果是正常封装的话 , 一图中的index就可以取消 这里中的是封装过深 , 获取数据的写法 如果封装的不深 , 只是嵌套了一层的话 去掉红框中的数据 ...
vue-element-checkbox中对象传递
weixin_33806914的博客
04-30 3903
使用watch来监听选中数组checkList里面的数量,到底是显示isIndeterminate(-),还是checkAll(√) 获取数据 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="changeAll">全选</e...
Vue中表单上传时对多选框的处理
luo254的博客
08-04 915
Vue中表单上传时对多选框的处理
ElementUI 多选框取值用 value，展示用 label
Dreamy_LIN的博客
11-08 3364
多选框： 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
请用element-ui和vue实现v-for循环el-checkbox-group 中的el-checkbox ，请用假数据配合具体代码实现
06-03
好的，我可以为您提供一个简单的例子，具体代码如下： ```html <template> <div> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in cities" :key="city.value" :label="city.label">{{ city.label }}</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { checkedCities: [], cities: [ { value: 'Shanghai', label: '上海' }, { value: 'Beijing', label: '北京' }, { value: 'Guangzhou', label: '广州' }, { value: 'Shenzhen', label: '深圳' }, { value: 'Hangzhou', label: '杭州' } ] } } } </script> ``` 这里使用了 element-ui 中的 `el-checkbox-group` 和 `el-checkbox` 组件，通过 `v-for` 循环遍历了 `cities` 数组，动态生成多个 `el-checkbox`，最终将选中的城市存储在 `checkedCities` 数组中。注意，这里的 `v-model` 绑定了 `checkedCities`，表示这是一个双向绑定的变量，可以读取选中的值，也可以设置选中的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值