动态表单

[element plus] vue3动态表单验证

动态表单验证，不能使用如下格式：message与validator不能同时使用，所以采用:rules="setValidatorRules(val)"逻辑处理方式。
lyt-top·2023-11-29 02:58

el-form动态表单动态验证(先验证不为空，再验证长度在20以内，最后向后台发送请求验证账号是否重复)

data(){varcheckSno=(rule,value,callback)=>{if(!value){callback(newError("请输入账号"));}elseif(value.length>20){callback(newError("长度为1-20"));}else{if(this.form.id){//修改时检查账号是否重复selectLoginId({sno:value,id
Rrar·2023-11-23 13:46

封装一个动态表单吧

经常做后台的小伙伴儿可能经常要遭遇各种表单结构，input，select，时间、日期插件等等，各种属性配置到吐，今天就带大家来封装一个可复用表单。表单参考了网上的一些例子，再结合自己的需求，封装了一个自己的业务表单组件。先上图：QQ截图20201118163834.png首先给大家看一下结构布局：我们现实放了一个form表单。然后利用el-form-item来循环遍历，给每一个el-form-it
我的弟弟叫泥鳅·2023-11-20 06:06

Bootstrap Blazor 实战动态表单组件

1.新建工程源码新建工程b18ValidateForm,使用nuget.org进行BootstrapBlazor组件安装,Chart库,字体.将项目添加到解决方案中dotnetnewblazorserver-ob18ValidateFormdotnetaddb06chartpackageBootstrapBlazordotnetaddb06chartpackageBootstrapBlazor.F
Densen2014·2023-11-15 21:48

动态表单获取某一项值

exportdefault{data(){return{form:{list:[{aaa:''}]},rules:{aaa:[{required:true,message:'请输入',trigger:'blur'}]}}},methods:{//失去焦点时获取某一项值btn(item,index){this.$refs.form.validateField(`list.${index}.aaa`,
学不会•·2023-11-09 20:59

React Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现

第一个动态表单可以通过外层的按钮去添加同级的表单，嵌套的一层就是在
zoe_ya·2023-11-09 03:06

使用Form Generator解决前端vue+elementUI动态表单功能

使用场景：1、在添加数据时候，页面上有固定的一部分表单，而另一部分表单相当于扩展属性，想做成动态生成，产品经理可以自己通过配置，页面就有了扩展属性的表单；2、前端开发也可以直接粘贴代码，提高开发效率；关于FormGenerator描述网站网址：https://mrhj.gitee.io/form-generator/#/GitHub：https://gitee.com/mrhj/form-gene
songywaa·2023-11-08 21:09

【uniapp】uview组件库 - 动态表单

版本问题：我的版本1.8.2，其他版本可能会报错效果展示1.动态表单组件DynamicForm.vue{{item.options.find((v)=>v.value==formModel[item.key
顾鸟·2023-11-04 05:07

防止跨站点脚本注入_防止跨站点脚本攻击

当攻击者将恶意脚本引入用户提交的动态表单时，就会发生跨站点脚本（XSS）攻击。XSS攻击会导致不良后果。
cuyi7076·2023-11-03 18:12

动态表单的设计与实现（基于Vue ElementUI）

在xxx信息管理这种业务场景中我认为最常见的操作就是对字段的处理(例如查询、编辑等区域的表单、图表的列名、表格的列名)，而字段恰恰是最为'规范的'，它有自己的名称、类型例如name它代表名称，类型为字符串，在页面中应该是一个文本框sex它代表性别，类型为数值型，当它为0的时候代表男、为1的时候代表女,在页面中应该是一个下拉框我们可以通过程序语言来描述这种数据结构用对象或者说map这种结构而不用数组
李凯旋·2023-11-01 13:44

Vue中动态增加表单项的方法

点击添加生成对应动态表单HTML添加JSexportdefault{data(){return{dataResult:[],}},created(){this.dataResult.unshift({name
小阳生煎·2023-11-01 06:54

el-form动态表单嵌套验证

prop=循环对象.下标.子属性提交exportdefault{data(){return{dynamicValidateForm:{domains:[{name:'姓名',value:"",key:1},{name:'家庭',value:"",key:2,children:[{name:'爸爸',value:"",key:11},{name:'妈妈',value:"",key:22}]},]}}
岳哥i·2023-10-31 03:57

vue + element-UI 动态表单实现

首先需要下载安装npminstallform-makingmain.js中引入importFormMakingfrom"form-making";import"form-making/dist/FormMaking.css";Vue.use(FormMaking);使用表单信息提交exportdefault{data(){return{jsonData:{list:[],config:{label
IF YOU～·2023-10-28 10:38

iview form 动态表单

最开始用得网上得发现前面得红色必选项跟着变换，但是表单验证输入了还是显示不能为空然后我用了v-if结果，红色星号在，表单验证确是可以的最终解决方法：用v-show!!!!!!!!把需要输入的用v-show来验证就好了，可以实现表单验证，还有红色星号的切换，真是不容易，麻烦给个赞！！
会玩代码的猫·2023-10-27 20:40

vue生成动态表单

Vue动态表单可以根据不同的数据动态地生成表单组件，方便快速地实现表单的创建和处理。下面给出一个示例，演示如何使用Vue动态表单生成一个简单的注册表单。
m0_黎明·2023-10-22 22:10

form表单的三种封装方法（Vue+ElementUI）

form表单的三种封装方法（Vue+ElementUI）1.首先是最普通，也是大家最先想到的方法，直接封装：2.实现表单动态渲染、可视化配置的方法，动态表单又可以分为两种方法：(注意：注意v-model
WY_ALA·2023-10-18 10:47

Vue+element - ui 自定义动态表单带校验

Vue+element-ui自定义动态表单带校验//父组件父组件对应的数据formData:{dataName:"",formItemList:[{label:'名称',//lable名称disabled
俗人彭jin·2023-10-17 23:28

【已解决】vue动态表单v-model无法编辑

这里写自定义目录标题Preface问题原因解决方案Preface今天有一个组织人员管理的需求，组织下的人员是动态新增/删除的。所以用到了动态添加表单。这个功能在ElementUI官网有例子。写法是这样的，但是我做的时候就遇到了v-model绑定值修改后没有更新视图。这个问题卡了我好一会（真的，这种越小的问题，越难被发现）我之前也做过这种表单，但是这是我第一次遇到这种问题问题原因写个大致的例子说明一
我看刑·2023-10-17 02:05

element el-form 动态表单及自定义校验

动态表单的增加、删除和自定义校验至保存data中字段声明ruleForm:{//基础信息表单name:"",state:1,subList:[{startTime:"",endTime:"",},],}
星辰贩卖屋_jn·2023-10-15 23:42

antd表单数据 如何动态设置,React + antd 实现动态表单添加删除功能

类似下面这种功能：点击添加表增加一行，删除表删除一行，思路：将这个表单抽成一个单独的组件，维护一个时间戳数组，这个数组的作用就是通过map循环来生成动态表单，每次点击添加就在数组里添加一个时间戳。
锋语声·2023-10-14 16:50

实现动态表单的一种思路 | 京东云技术团队

一、动态表单是什么区别于传统表单前后端配合联调的开发实现方式，动态表单通过一种基于元数据管理的配置化方法来实现表单的动态生成，并能根据配置自由增改删指定字段。实现特定需求的自助化。
京东云技术团队·2023-10-14 07:23

动态自定义表单封装

为什么要做这个动态表单呢？提高前端开发效率，是公司组件库中必不可少的一种组件。提高自身对Vue组件的理解和代码封装能力。
Sunshine_Boys·2023-10-07 07:09

微信公众号自定义消息模板（处理数据）

根据公众号推送信息模板列表里的内容，对数据进行处理，取出部分数据以表单的形式发送给后端（动态表单），如图所示：要处理的数据内容以表单发送用正则表达式先取中文字只要中文字this.labelList=val.match
蒙古-学习记·2023-10-05 22:05

form组件的封装（element ui ） 简单版本

实现思路拿下表单模板一个个的改造（文本，下拉，单选，复选等）按钮默认值的设定rules规则的处理创建通用的form组件这段代码是一个Vue.js组件，用于创建一个动态表单。
前端 贾公子·2023-09-23 09:36

el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；

场景：本文是两种表单校验1.对于数组for循环，校验每一项2.对于两个不同的字段，分别v-if显示隐藏的校验一、新增和删除表单项，动态校验。el-form表单动态动态新增表单进行校验。直接参考动态增减表单项以下代码可直接复制：重点在于:prop:rules:key删除提交添加保费重置exportdefault{data(){return{dynamicValidateForm:{premiumLi
i_am_a_div_日积月累_·2023-09-17 09:37

Element plus之el-form表单验证失效+动态表单验证+多层级对象属性验证方案

——around目录1.表单验证问题2.多层级对象属性验证3.动态表单验证列前言旨在解决项目过程中遇到触发el-form验证失效，多级对象属性如何编写验证规则，动态表单控件如何处理。
一夜相思愁·2023-09-12 13:28

动态表单设计

动态表单设计背景方案讨论基于上面分析，对比调研，自定义动态表单数据模型表单详解（一）表单模板：jim_dynamic_form（二）表单数据类型：jim_form_data_type（三）表单字段定义：
zquwei·2023-09-11 03:50

封装动态表单组件

技术栈：vue2+js+webpack需求：利用数据渲染表单，实现代码的精简化及效率的提升。效果图：封装的组件：issueEvent(e,item.onFocus)"@blur="e=>issueEvent(e,item.onBlur)"@change="e=>issueEvent(e,item.onChange)"/>issueEvent(e,item.onChange)">issueEvent
蜡笔小嘟·2023-09-07 13:44

JSON Schema动态表单配置规则应用

目录前言一、JSONSchema规范二、schema字段描述三、JSONSchema应用一、业务描述二、模版数据表设计三、规则表设计四、构造Groovy脚本参数Map五、执行Groovy脚本前言Formily提供了JSONSchema、JSXSchema、纯JSX三种开发模式。由于JSON可以序列化保存到数据库中，所以JSONSchema的方式非常适合后端动态渲染表单，前端完全不需要维护schem
yangyanping20108·2023-09-06 21:21

vue之动态表单(优化)

代码资源在这儿↑vue之动态表单优化vue2+js动态表单优化vue3+ts动态表单优化vue2+js动态表单优化效果图目录结构五个文件的完整代码:以下是App.vueimportFormpagefrom
码上暴富·2023-09-06 00:55

html动态生成一个空表往空表里写数据,详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...

动态表单生成ElementUI官网引导关键配置template中,form和form-item的写法和绑定data里的值为空methods中，向后台获取数据的函数写法1.form,form-item,input
鲸游·2023-09-05 18:20

elementUI中的table动态表单记录

form表单与table一起使用之前一直以为form表单是单独使用，现在联动起来发现只是套了一层外壳，并不是很麻烦的事情form的单独使用提交重置form与table的联合在table的column中使用solot将form-item放入。需要注意的还是数据格式与rulesform内使用的是input输入框，它所绑定的值当前行数据的属性原来的写法是form表单绑定form后使用form.xxx进行
一路向前的月光·2023-09-05 06:51

react&antd（12）动态表单的默认值问题

最近遇到一个需求是有一个表单可以输入各种信息，然后还需要有一个编辑功能，点击编辑的时候需要把当前数据填入到表单里面。在网上查了很多种方法，然后我的思路是使用initialValues搭配setState()使用。默认值都为空，然后点击单条数据时把该条数据需要的字段setState()更新。//Table组件的columns[{xxx},{title:'操作',key:'operator',data
郑板桥30·2023-08-30 11:42

基于vant封装的动态表单(VFrom使用教程)

vant-ui是属于vue开发移动端中用的比较多的一个组件库了，网上基于它的一些组件的二次封装也数不胜数，但是却都是零零散散，不成体系。总不能用一个就去找类似的封装吧，这样拼凑起来的也不是我们想要的。尤其，涉及众多表单业务的时候。1.场景需求假如你遇到这样一个场景，需要做一个表单收集。涉及到输入框，单选框，多选框，下拉框，时间选择等等七八个表单。基于vant-ui的情况下，去官网单个的去复制粘贴。
流情·2023-08-29 07:12

开源vue动态表单组件

一、项目简介vue+element的动态表单组件，拖拽组件到面板即可实现一个表单二、实现功能支持拖拽支持输入框支持文本框支持数字输入框支持下拉选择器支持多选框支持日期控件支持开关支持动态表格支持上传图片支持上传文件支持标签支持
时尚IT男·2023-08-29 02:13

element框架select值更新页面不回显的问题，动态表单props绑定问题

1、页面中使用form表单，引入select组件当data中默认没有定义form.region的值时，会出现选择select后input没有回显选择数据值；所以使用select时，必须定义默认值exportdefault{data(){return{form:{name:'',region:''}}},methods:{onSubmit(){console.log('submit!');}}}2、
qq_43628158·2023-08-26 13:09

在Vue2.0中集成Vform动态表单

目录一、打包下载源码，引入组件1、项目地址2、下载并打包二、将vform集成到项目中1、导入v-form-designer、v-form-render两个组件2、在项目的main.js文件中引入组件，并注册组件三、注册路由1、引入VFormDesigner设计器2、使用VFormDesigner设计器报错解决及注意事项2.1报错及解决：2.2注意事项四、渲染表单1、引入VFormRender渲染器
小张快跑。·2023-08-22 02:44

element-ui动态表单和验证

在使用element-ui开发中，经常会用到对动态创建的表单进行字段验证，比如新增多个类似卡片的表单，里面的字段需要做验证，此时就要使用到动态表单验证，官方文档写的有示例，但是不够清晰。
余道各努力，千里自同风·2023-08-21 14:15

基于mongodb的动态表单实现

文章目录1.项目背景2.术语表3.技术选型4.概要设计4.1.逻辑架构图4.2.系统覆盖图5.详细设计5.1.元数据样例及说明5.2.关于uuid6.接口清单6.1.表单管理模块6.1.1.从excel导入表单元数据6.1.2.表单元数据树查询6.1.3.表单元数据CRUD6.1.4.通过表单配置生成建表sql6.2.命名空间模块6.3.流程管理模块7.承上启下8.系统实现8.1.使用开源项目“若
Kelvin写代码·2023-08-21 10:08

antdv动态表单回显

在项目中经常遇到动态表单的业务。在编辑动态表单时需要回显新增后的内容。本文介绍AntDesignofVue的动态表单回显。比如新增时添加了两行动态表单，在第二次编辑时需要进行回显。
寄风与你·2023-08-18 11:01

Vue+ElementUI实现表单动态渲染、校验（二）

Vue+ElementUI实现表单动态渲染、校验（二）2.动态渲染的表单添加校验在Vue+ElementUI实现表单动态渲染、校验（一）中，主要分析了动态表单如何递归渲染。
Chanel-L·2023-08-16 16:58

解决ElementUI动态表单校验验证不通过

这里记录一下，写项目时遇到的一个问题：就是动态渲染的表单项，加验证规则后一直不通过！！！原代码html部分：提交添加班级js部分：return{tableData:[],teaName:'',page:1,total:0,pageSize:12,classData:[],show:false,dra:false,direction:'rtl',addFom:{teaName:'',teaSex:t
超*·2023-08-16 13:21

ElementUI动态添加表单项

在实现这个动态表单项时一直报错脑瓜子嗡嗡的！不过好在昨天休息好了，今天起来趁脑瓜子好使，一会就弄好了。
超*·2023-08-14 01:13

element-ui 动态表单

背景：朋友入职新公司，做项目重构，根据后端返回表单内容，动态生成表单，于是自己实现了下，哪里写的不好，欢迎各位提建议：因为开关和多选框默认值是非空字符串，所以在created生命周期单独处理了下exportdefault{name:"Home",components:{},data(){return{form:{},list:[{label:"xxx",type:"input",key:"key1
Wombat-·2023-08-11 23:36

vue2 + antd 封装动态表单组件（三）

最近有小伙伴在问动态表单如何再次封装，比如配合模态框或者抽屉封装多一层，这样可以大大提高开发效率，结合之前的写的vue2+antd封装动态表单组件（一）vue2+antd封装动态表单组件（二）做了优化，
guizi0809·2023-08-11 15:08

Rasa Form 表单使用

Form停用表单SlotMappings用户不按照预期回答WritingStories/RulesforUnhappyFormPaths高级用法验证表单输入自定义槽位提取CustomSlotMappings动态表单
铅笔小小辛·2023-08-11 10:15

Vue3中使用TDesign添加动态表单校验

html部分注意这里的data和收集数据的动态表单要有层级关系js部分//表单相关数据constform_data=reactive({address:[{sub_sn:"",person:"",mobile
真让人秃头呀·2023-08-07 18:55

Angular 动态表单值设置及问题处理

::需求使用angular中的动态表单设置初始值::解决方案::方式一::官方说明：1）为表单控件设置新值；2）修补控件的值formGroup.controls[fieldName].setValue(
^Being^·2023-08-07 04:57

Vue + elementUI 自定义select-tree下拉树组件

主要可以支持动态表单的特性及v-model，支持禁用，支持放在表单中使用，下面请看代码。
法号轻尘·2023-08-05 19:03

elementui动态表单实现计算属性携带参数，并将计算出的值四舍五入保留两位小数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言方法1方法2结论前言写项目的时候，遇到需要在动态表单中，将同一级输入框输入的内容计算出来，并动态显示，发现computer计算属性好像不能带参数
小超爱编程·2023-08-05 12:17
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他