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

已于 2022-08-21 21:20:06 修改
阅读量519 收藏
点赞数
文章标签： 前端 elementui
于 2022-03-22 13:33:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FF_XM/article/details/123658263
版权
在使用Vue的el-form组件时，遇到动态数据绑定的问题，特别是多选框需要绑定数组。解决方法分为三步：第一步，确保数据结构正确，将多选值保存为数组；第二步，在模板中使用v-model动态绑定，并处理多选框的值；第三步，监听表单变化，更新并验证数组类型的多选值。
摘要由CSDN通过智能技术生成

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

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

但是多选的值必须为数组

解决:

第一步

第二步

第三步

FF_XM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui select组件中复选时以字符串形式显示
weixin_30454481的博客
02-01 2471
我使用的element-ui的版本是1.4.13。 如上图所示，使用el-select组件，要实现可搜索、可复选、可创建条目时，展示样式是如上图所示，输入框的高度会撑开，影响页面布局，按照产品的需求，要调整为以下样式： 1、复选时，输入框中不以标签的形式展示，而是以字符串的形式展示。 2、超出部分显示省略号，并且鼠标移入显示提示框，用来展示全选的内容。 下面是源码修改部分： （1）在selec...
Element Checkbox 多选框点击一个导致全选
qq_43517774的博客
11-05 3448
问题复现： 点击一个框的时候，所有框都被选中 调取后端接口，值未被读取 想要实现的样子： 代码： vue的template部分 <el-form-item label="录像类型" prop="videoType"> <el-checkbox-group v-model="ruleForm.videoType" prop="videoType"> <el-checkbox label="1" name="videoType"
vue中form表单v-model动态绑定遍历数组
Ye123456_的博客
09-03 2462
<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...
element-ui el-select 多选单选切换报错问题
热门推荐
kyoog的博客
09-12 1万+
项目需求 后台表单是前台自建的 控件自然也要自建 自然就有各种选项 其中选择框 就有单选多选选项 项目使用的element-ui 自然就用的el-select 由于数据库并没有类似数组的字段 选择框使用varchar 而el-select多选时却需要使用数组 所以在编辑时 需要将值转成数组再赋值给el-select的value  &lt;template&gt; &lt;el-se...
elementUI多选框组件：多选数组，取值问题
草巾冒小子的博客
08-06 7522
elementUI多选框组件：多选数组，取值问题 效果图： <templete>部分： <!-- 我的推荐人才的简历列表 --> <!-- 已发布职位list列表 --> <el-table :data="resumes" stripe style="width: 100%" max-height="500" @selection-change="...
element ui中的select多选问题
weixin_46319117的博客
10-29 3639
在使用select下拉框多选时，在编辑用户角色时，编辑界面为select下拉框的model赋值了，选择的数据有问题，输入框中的值不能与下拉框的值对应上。
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
最新发布
qq3892997的博客
11-02 5959
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
weixin_30181209的博客
02-01 1316
wl-vue-select，wl-tree-select简介用于vue框架的树形下拉框及带全选的普通下拉框。Tree drop-down box for vue framework and ordinary drop-down box with select all.本组件提供全选下拉框和树形下拉框功能。wlVueSelect这是一个基于 elementUi 的 el-select 组件的二次封装...
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
weixin_35785793的博客
02-15 3064
#wl-vue-select，wl-tree-selectcss#简介vue用于vue框架的树形下拉框及带全选的普通下拉框。nodeTreedrop-downboxforvueframeworkandordinarydrop-downboxwithselectall.git本组件提供全选下拉框和树形下拉框功能。github`wlVueSelect`这...
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1266
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
一个基于 elementUi的vue树形下拉框组件
qq_15390381的博客
10-17 1744
# wl-vue-select #简介 本组件提供全选下拉框和树形下拉框功能。 `wlVueSelect`这是一个基于 elementUi 的 el-select 组件的二次封装的下拉框，提供了全选功能和默认选中功能； `wlTreeSelect`这是一个基于 elementUi 的 el-tree 组件的二次封装的下拉框，提供了树形数据支持和默认选中功能； 因这两个需求非常...
elementui复选框组使用与遇到的问题
weixin_44849078的博客
04-19 3813
elementui复选框组使用与遇到的问题1、复选框组使用2、默认值的设置3、遇到的问题3.1、导致问题的写法3.2、正常可以使用的写法 今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。 1、复选框组使用 // deviceDialogFormData.config默认为['0'] ...
element v-for循环列表的表单校验（动态绑定的数据)
小猪的博客
12-21 4025
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的多选框组件）
CH_whale的博客
10-02 755
1. 问题描述 OJ中设计多选题组件时，后端请求数据如下： 需求描述： （1）需将多个题目ID（qtopicsetId）和用户答案（userAnswer）封装在一个数组中； （2）用户答案包括多个，也需用一个数组存储； （3）用户答案需根据用户所选进行动态更改； 2. 解决方式 使用element中的Checkbox多选框组件 （1）v-model绑定一个数组，用于存放用户所选的答案： （2）change事件中可以打印查看绑定的值 ...
使用element-ui里面的多选框时,选一个其他的都选上了
old_hu的备忘录
05-22 4468
如果出现点击一个其他的都选中或取消,就是v-model里面的是字符串,这个时候只要找到v-model里面的值为何不是数组,然后改为数组就能解决问题
element v-for动态绑定数据 循环列表表单验证实现
alokka的博客
07-08 716
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
单选框，多选框，下拉框值的绑定和获取选项
weixin_30904593的博客
05-05 729
单选框，多选框 ，下拉框获取值，都需要用v-model绑定。 单选框和下拉框绑定的是字符串 ，多选框绑定的是数组。 下拉框的v-model是写在select标签里的，不是写在option标签里的。 例子： <template> <div> <!-- （1）单选框，多选框和下拉框都要value，如果是循环的选项，那就要用:value （2）单选框...
element,循环数据的使用
sunsiny
05-14 818
<!-- * @Author: ljw * @LastEditors: ljw * @Date: 2019-11-05 15:11:39 * @LastEditTime: 2019-11-09 13:00:49 * @Description: 服务记录详情的变更记录Item --> <template> <div v-loading="addLoading" class="item-box"> <!-- <h3 class="title
elementUI_checkbox_选中值只能为boolean值？
qq_43260366的博客
03-09 797
后来发现在双向绑定过程中，若是绑定的是非boolean的数据，elementUI。在此我使用的是elementUI的el-checkbox组件。在这里存在一个 多选框 后端返回值分别为1和0。但是后端无论是返回0还是1永远显示没有选中。这样就可以实现 我们想要的结果了。不会进行数据类型转换。
element-ui 复选框多选 数组绑定值，突然变成布尔值了
04-05
可能是因为在绑定值的时候，使用了单个变量而不是数组。如果绑定的是单个变量，那么在选中多个选项时，绑定的值会变成布尔值，表示是否选中了该选项。 可以尝试修改绑定值的方式，...这样就可以正确地绑定多选的值了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值