elment多选循环绑定值必须为数组问题

原创 已于 2022-08-21 21:20:06 修改 · 621 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #elementui

于 2022-03-22 13:33:58 首次发布
在使用Vue的el-form组件时，遇到动态数据绑定的问题，特别是多选框需要绑定数组。解决方法分为三步：第一步，确保数据结构正确，将多选值保存为数组；第二步，在模板中使用v-model动态绑定，并处理多选框的值；第三步，监听表单变化，更新并验证数组类型的多选值。

用的el-form组件 ,值绑定的是form内的值

因为是动态数据form内的单选多选绑定的都是遍历的值

但是多选的值必须为数组

解决:

第一步

第二步

第三步

FF_XM
关注
关于多选题的传值问题（使用element的多选框组件）
CH_whale的博客
10-02 863
1. 问题描述 OJ中设计多选题组件时，后端请求数据如下： 需求描述： （1）需将多个题目ID（qtopicsetId）和用户答案（userAnswer）封装在一个数组中； （2）用户答案包括多个，也需用一个数组存储； （3）用户答案需根据用户所选进行动态更改； 2. 解决方式 使用element中的Checkbox多选框组件 （1）v-model绑定一个数组，用于存放用户所选的答案： （2）change事件中可以打印查看绑定的值 ...
element-ui el-select 多选单选切换报错问题
热门推荐
kyoog的博客
09-12 1万+
项目需求 后台表单是前台自建的 控件自然也要自建 自然就有各种选项 其中选择框 就有单选多选选项 项目使用的element-ui 自然就用的el-select 由于数据库并没有类似数组的字段 选择框使用varchar 而el-select多选时却需要使用数组 所以在编辑时 需要将值转成数组再赋值给el-select的value  <template> <el-se...
Element-ui中el-select多选经常出现的问题
weixin_46934791的博客
04-27 2099
Element-ui中el-select多选传值、回显问题
vue+elementUI使用v-for循环出多个el-select下拉框，多个下拉框不受影响且反显
Billow_lamb的博客
12-11 1万+
vue+elementUI使用v-for拿到循环出多个el-select下拉框，且多个下拉框不受影响 <template> <div> <div v-for="(item, index) in from" :key="item.label"> <span>{{ item.label }}</span> <!-- arr[index] 每一个值的绑定@change="(val) => chageValu
elementUI多选框组件：多选数组，取值问题
草巾冒小子的博客
08-06 7625
elementUI多选框组件：多选数组，取值问题 效果图： <templete>部分： <!-- 我的推荐人才的简历列表 --> <!-- 已发布职位list列表 --> <el-table :data="resumes" stripe style="width: 100%" max-height="500" @selection-change="...
vue中form表单v-model动态绑定遍历数组
Ye123456_的博客
09-03 2691
<el-formref="formDatabase":model="permissonList.bizContent":rules="rules":inline="true"label-width="120px"> <el-form-item style="display:block" v-for="(item,index)inapiManagerParameter" :label="item.parame...
vue element-plus el-select 多选 如何绑定string类型字段
08-21
最后，生成相关问题：在使用 Vue 和 Element Plus 时，将 `el-select` 多选的值绑定到字符串类型字段需要通过数组与字符串之间的转换来实现。以下是两种常用方法： ### 方法一：使用计算属性（推荐） 通过计算属性...
el-select多选采用string类型
07-16
我们面对的问题：el-select多选模式下，默认绑定值是数组，但我们需要绑定字符串（用逗号分隔） 根据引用[1]和[3]，我们可以通过使用计算属性或中间变量来实现数组和字符串之间的转换。 但是注意引用[4]提到的坑：...
Element-plus 中 cascader级联选择器 的懒加载使用
06-12
// 存储选中值，格式为数组 ['省ID', '市ID', '区ID'] const cascaderProps = ref({ lazy: true, // 启用懒加载 async lazyLoad(node, resolve) { const { level, data } = node; const parentId = level === ...
在表单中elementui中的el-checkbox接入动态数据后调用事件返回值是布尔值不是数组
07-18
根据用户描述，问题核心在于：使用动态数据绑定el-checkbox后，change事件返回的是布尔值而非数组。这通常是因为错误地将change事件绑定到了单个el-checkbox上，而不是绑定到el-checkbox-group上。下面详细分析并...
el-select的option是{ 1: '工程师', 2: '供应商', 3: '安全员' },如何绑定
最新发布
08-30
`v-model` 绑定的值必须与 `:value` 的类型匹配： ```javascript // 正确：数字类型 selectedRole: 2 // 错误：字符串类型会导致匹配失败 selectedRole: '2' ``` 2. **对象键值处理** 如果原始键值是...
element-ui select组件中复选时以字符串形式显示
weixin_30454481的博客
02-01 2646
我使用的element-ui的版本是1.4.13。 如上图所示，使用el-select组件，要实现可搜索、可复选、可创建条目时，展示样式是如上图所示，输入框的高度会撑开，影响页面布局，按照产品的需求，要调整为以下样式： 1、复选时，输入框中不以标签的形式展示，而是以字符串的形式展示。 2、超出部分显示省略号，并且鼠标移入显示提示框，用来展示全选的内容。 下面是源码修改部分： （1）在selec...
element ui中的select多选问题
weixin_46319117的博客
10-29 3859
在使用select下拉框多选时，在编辑用户角色时，编辑界面为select下拉框的model赋值了，选择的数据有问题，输入框中的值不能与下拉框的值对应上。
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
qq3892997的博客
11-02 6981
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length‘ of null
yxm_136452789的博客
11-03 2435
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length’ of null。 报错 报错原因 v-model绑定的值在定义的时候有问题，多选框类型应该定义为数组，之前是checkList:null。 <el-checkbox-group v-model="checkList" :disabled="disabled" @change="handleChange($event, re
elementui复选框组使用与遇到的问题
weixin_44849078的博客
04-19 3975
elementui复选框组使用与遇到的问题1、复选框组使用2、默认值的设置3、遇到的问题3.1、导致问题的写法3.2、正常可以使用的写法 今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。 1、复选框组使用 // deviceDialogFormData.config默认为['0'] ...
element v-for循环列表的表单校验（动态绑定的数据)
小猪的博客
12-21 4458
1、一层循环时嵌套： html： <el-form :model="addform" ref="addform" :rules="rules"> <el-form-item label="资源" required label-width="120px"> <el-row v-for="(item,i) in addform.resourceList" :key="i"> <el-col :span="10">
使用element-ui里面的多选框时,选一个其他的都选上了
old_hu的备忘录
05-22 4562
如果出现点击一个其他的都选中或取消,就是v-model里面的是字符串,这个时候只要找到v-model里面的值为何不是数组,然后改为数组就能解决问题
element v-for动态绑定数据 循环列表表单验证实现
alokka的博客
07-08 828
1. 总结 遍历的 el-form-item 数据 domains 为 el-form v-model 对象里的数据 在遍历的 el-form-item 中添加rules，:prop="‘domains.’ + index + ‘.value’" <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
element-ui 复选框多选 数组绑定值，突然变成布尔值了
04-05
可能是因为在绑定值的时候，使用了单个变量而不是数组。如果绑定的是单个变量，那么在选中多个选项时，绑定的值会变成布尔值，表示是否选中了该选项。 可以尝试修改绑定值的方式，...这样就可以正确地绑定多选的值了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值