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

最新推荐文章于 2022-10-31 11:52:42 发布
最新推荐文章于 2022-10-31 11:52:42 发布
阅读量339 收藏 1
点赞数
文章标签： javascript 前端 vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827018/article/details/122671356
版权

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

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

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

 

团子的小仓库
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui Form 表单中使用Checkbox 多选框，label 标签与Checkbox的对齐问题
m0_67484664的博客
05-15 1336
在element-ui 表单中结合多选框，el-form-item 的 label 标签文字与多选框文字不水平对齐。
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
Html之form提交，下拉，多选，单选，语义化
雨落长安街
07-09 1764
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表单提交option多选框，后台接收处理
明天和意外哪个先到，其实这不重要
05-23 6847
有时候页面新增数据的时候一条一条添加很麻烦，操作很不友好，就需要点选很多次，这个时候多选框就很方便，传多个值到后台，后台处理再循环添加更方便一点，一般参数提交我们更多选用的是form表单提交的格式 form表单是根据name值确认给后台传的，因为一个对象，多选的name值一样它最终只会传一个值到后端，这就很烦了，除非不用form表单提交，而是把所有的参数都拼接起来使用传值，但是这样如果页面有改动...
Vue form-create的基本使用 和 自定义表单组件的数据通迅
热门推荐
沐枫
04-30 3万+
form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器。 轻松搞定 form 表单,让你不再为表单而烦恼form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。hidden、input、inputNumber、checkbox...
vue自定义表单生成器form-create使用详解
10-16
主要介绍了vue自定义表单生成器,可根据json参数动态生成表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
form-create-designer:好用的vue可视化表单设计器
04-06
本项目还在不断开发完善中，如有任何建议或问题本项目QQ讨论群安装npm install @form-create/designer♡ CDN： <!-- import Vue.js -->< script src =" //vuejs.org/js/vue.min.js " > </ script &gt...
使用form-create动态生成vue自定义组件和嵌套表单组件
01-21
使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ ...
vue-form-create:基于Vue3.0的表单设计器
04-17
vue-form-create基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 与 cdn 引入的方式。UI 库支持 ant-design-vue 与 element-plus。支持功能远端数据获取图片上传富文本编辑器栅格布局生成 JSON生成代码演示地址...
解决：＜form:select multiple=“true“＞form表单下拉框多选及回显
枯萎花一朵
12-21 2303
开发需求中遇到了一个下拉框多选及回显js问题，最终解决！ 页面效果 因为框架较老，这部分筛选是使用from表单请求的，所以多选框回显有些复杂，最终页面效果是如下： 代码示例 jsp页面代码： <!--因为项目使用是jeesite，这里使用from:select，根据自己所需选择--> <!--注意：multiple="true" 属性是实现多选必须要加的属性，--> <form:form id="searchForm" modelAttribute="loanBalanc
Form-checkbox多选框
hrbsfdxzhq01的博客
01-04 899
&lt;!--单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。 在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。--&gt; &lt;el-checkbox v-model="checked"&gt;备选项&lt;/el-checkbox&gt; data() ...
form的编辑与展示的切换(输入框，单选多选框，上传图片，颜色选择器)适用个人信息的展示与修改
TangJing_的博客
07-29 825
form的编辑与展示的切换。上传图片(用于展示头像)编辑时每次仅只能上传一张图片，上传完成后回显且隐藏上传框，删除图片后显示上传框。可对图片进行预览，判断上传文件的类型与大小。
Vue——formcreate表单设计器自定义组件实现
小欣儿的专栏
10-31 9953
本文主要介绍Form Create表单设计器使用自定义组件的过程。
React父组件向子组件传值
m0_46088410的博客
10-13 264
发发发
动态生成form表单,不再为表单烦恼
weixin_33866037的博客
02-27 526
form-create 具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片上传等功能组件。 1.4.5版本已支持 iview3 Github | Gitee | Npm | form...
vue 根据选项生成表格_vue+element创建动态的form表单.以及动态生成表格的行和列...
weixin_39613824的博客
01-17 328
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.最后我使用了笨方法,针对各个表单写好通用的组件，然后根据type用v-if来渲染对应的表单,数据，事件什么的都可以动态的传进去,比较好用1 2 3 4 5 :...
异步绑定下拉框
sult812的博客
09-18 341
异步绑定下拉框 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Adobe JavaScript 作者：陈钰桃 撰写时间：2020年9月17日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 成果图（只有选择了上一个模态框，下面
Vue使用form-create-designer插件搭建表单构建器
ProChick's Blog
04-13 1万+
目录一、插件简介1.快速导航2.核心功能二、基础使用1.下载插件2.引入插件3.配置使用4.效果演示三、功能扩展1.下载插件2.引入插件3.配置使用4.效果演示 一、插件简介 form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。 1.快速导航 插件地址：https://github.com/xaboy/form-create-designer 文档地址：ht
用 Javascript 验证表单（form）中多选框（checkbox）值
anjichan4261的博客
05-10 250
和单选框一样，许多新手在用 Javascript 验证表单（form）中多选框（checkbox）的值时，都会遇到问题，原因是 checkbox 和普通的文本框在获取值的时候有很大不同，本文介绍了一个较为通用的获取 checkbox 值的方法，希望对新手有用。 --------------------------------------------------------...
form-create和form-create-designer创建自定义组件
最新发布
07-28
form-create 是一个基于 Vue 的表单生成器，它可以帮助开发者快速生成复杂的表单，并且支持自定义组件。form-create-designer 是 form-create 的可视化设计器，它提供了一个可视化界面，让开发者可以直接在界面上进行表单的设计和配置。 要创建自定义组件，首先需要定义一个 Vue 组件，并将其注册到 form-create 中。下面是一个简单的示例： ```vue <template> <div> <input v-model="value" :placeholder="placeholder"> </div> </template> <script> export default { name: 'CustomInput', props: { value: { type: String, default: '' }, placeholder: { type: String, default: '' } } } </script> ``` 然后，在使用 form-create 的地方，可以通过 `fc.component` 方法注册这个自定义组件： ```javascript import fc from 'form-create' import CustomInput from './CustomInput.vue' fc.component('custom-input', CustomInput) ``` 注册完成后，就可以在表单配置中使用这个自定义组件了： ```javascript const form = new fc.Form() form.setFields([ { type: 'custom-input', field: 'custom', title: 'Custom Input' } ]) form.render() ``` 这样就可以在表单中使用自定义组件 `custom-input` 了。在实际使用中，你可以根据需要定义更复杂的自定义组件，并在 form-create 中进行注册和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值