form-create表单编辑时展示已有的多选框

最新推荐文章于 2024-01-31 16:21:47 发布
最新推荐文章于 2024-01-31 16:21:47 发布
阅读量434 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44827018/article/details/122671356
本文介绍在使用form-create表单进行编辑操作时遇到的问题及解决方案。作者最初尝试直接将值赋给value属性，却发现无法正确显示已有值。经过多次尝试后发现，正确的做法是对数组进行遍历并提取出每个项的id作为value值。

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

在使用form-create表单时，编辑功能需要展示已有值，而不能是空值，当时我只是把值直接赋给value，但是一直不显示我已有的值，后来优化对的时候一直想着在预加载的时候给options做数值合并，其实根本不对！几经波折，我终于发现我错在哪里了！

 如图，value值只需要赋value值就行！也就是说赋你的选项对应的id即可！我数据在获取时得到的是数组

所以给数组遍历一下，只取id即可解决问题！

 

form的编辑与展示的切换(输入框，单选多选框，上传图片，颜色选择器)适用个人信息的展示与修改
TangJing_的博客
07-29 977
form的编辑与展示的切换。上传图片(用于展示头像)编辑时每次仅只能上传一张图片，上传完成后回显且隐藏上传框，删除图片后显示上传框。可对图片进行预览，判断上传文件的类型与大小。
vue-form-craft，基于vue3的开箱即用表单方案
xinnian66aa的博客
02-28 2750
首先祝各位朋友们新年快乐！龙年大吉！在前端开发过程中，表单渲染是重要且繁琐的一环。为了提高开发效率并避免重复工作，我开发了一款基于vue3的表单工具，并取名vue-form-craft（vue表单工艺）。是适用于vue3项目中后台表单的一种通用解决方案。本文将介绍 vue-form-craft 的基本概念、使用方式及高级特性。主要由FormDesign（表单设计器）和SchemaForm（表单渲染器）组成。FormDesign通过拖拽快速生成JsonSchema，SchemaForm。
用 Javascript 验证表单（form）中多选框（checkbox）值
anjichan4261的博客
05-10 310
和单选框一样，许多新手在用 Javascript 验证表单（form）中多选框（checkbox）的值时，都会遇到问题，原因是 checkbox 和普通的文本框在获取值的时候有很大不同，本文介绍了一个较为通用的获取 checkbox 值的方法，希望对新手有用。 --------------------------------------------------------...
用 Javascript 验证表单（form）中多选框（checkbox）的值
yanleigis的专栏
11-06 1362
       net     wps                // 说明： 用 Javascript 验证表单（form）中多选框（checkbox）的值 // 作者： CodeBit.cn ( http://www.CodeBit.cn )function myclick(obj) {alert(obj.value);}function getCheckboxValue
Form-checkbox多选框
hrbsfdxzhq01的博客
01-04 1037
<!--单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。 在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。--> <el-checkbox v-model="checked">备选项</el-checkbox> data() ...
ElementUI Form：Checkbox 多选框
ChinaDragon10的博客
01-31 2207
ElementUI Form：Checkbox 多选框
form-create表单多选框选中无禁止选择其他选项
09-27
在使用`form-create`这个前端表单构建工具（假设它是一个基于Vue或React等框架的组件库）时，如果想实现一个多选框列表，其中有一个默认选中并且不允许用户继续选择其他选项的情况，通常的做法是在HTML结构中设置一...
响应式设计要点：Vue表单生成器Form-Create优化移动端表单体验
本文主要探讨了响应式设计与移动优先原则的应用，并深入分析了Vue表单生成器Form-Create的基础知识和高级特性。通过详细介绍Vue.js的核心概念、响应式数据绑定原理、Form-Create的核心功能与优势，本文旨在为开发者...
``` <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value" @change="change"></form-create>```如何使多选框互斥
最新发布
09-27
在这个Vue.js模板片段中，`<form-create>` 是一个自定义组件，它接受几个属性：`v-model`、`:rule`、`:option` 和 `@change`。...当用户改变选项时，会触发`change`方法，从而保证多选框之间的互斥。
Laravel开发-form-builder
08-28
`laravel-form-builder`包通常包含一套丰富的表单元素方法，如文本输入、密码、选择框、多选框、文件上传等。 2. **安装与配置** 要使用`laravel-form-builder`，首先需要通过Composer安装。在项目根目录下的`...
js表单处理中单选、多选、选择框值的获取及表单的序列化
11-22
本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化，写成了一个对象。如下： var formUtil = { // 获取单选按钮的值，如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '') { value = elements.value; } e
form表单复选框取值
09-23
js调用时使用form表单进行对选中复选框的内容取值
在HTML下，如何为多个选择框提取数据并序列化
weixin_33989058的博客
11-05 217
如果同时存在选择框及下拉框，如果用JQUERY获取相关数据呢？   &lt;form id="deploy-form"&gt; &lt;checkbox&gt;多选框 &lt;select name="select-deployversion" form="deploy-form"&gt;下拉框&lt;/form&gt;获取内容时： var group_data = $(&qu
js 操作form表单多选框、下拉框
weixin_43294560的博客
11-04 2056
js操作多选框 **获取指定打勾对象** 获取多选框对象,遍历 通过勾选属性checked为true来判断 function t1() { var favs=document.getElementsByName("fav"); for(var i=0;i<favs.length;i++) { /*打印只勾选的多选框*/ ...
DOM对象forms表单操作多选框执行全选,全部选,反选操作
Byte_Dance的博客
02-08 914
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;form表单操作多选框&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;for
form表单提交option多选框，后台接收处理
明天和意外哪个先到，其实这不重要
05-23 7073
有时候页面新增数据的时候一条一条添加很麻烦，操作很不友好，就需要点选很多次，这个时候多选框就很方便，传多个值到后台，后台处理再循环添加更方便一点，一般参数提交我们更多选用的是form表单提交的格式 form表单是根据name值确认给后台传的，因为一个对象，多选的name值一样它最终只会传一个值到后端，这就很烦了，除非不用form表单提交，而是把所有的参数都拼接起来使用传值，但是这样如果页面有改动...
关于Element-ui中 表格（Table）组件中 toggleRowSelection 方法设置默认多选项 但是不勾选的问题
weixin_42293178的博客
06-28 3723
Element-ui中，表格（Table）的 toggleRowSelection 方法无法默认选中的情况
Html之form提交，下拉，多选，单选，语义化
雨落长安街
07-09 1945
1.表单之中input标签的简单应用<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <hr> <fieldset> <legend>form笔记</legend> <pre> from表单 收集信息 每个标签都有name type
form-create 追加rule【append rule】导致下拉框select数据丢失
yangxun9264986的博客
12-01 772
form-create 修改标段规则导致下拉框select数据丢失
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值