腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

Angular 动态表单

开发过程中，表单是最常用处理数据的窗口。其出场率居高不下。每个表单都要去写HTML，CS, JS。还要验证。让本就枯燥繁琐的开发更显无趣。动态表单功能：不限布局。不限个数。（也可以理解为，一个表单折分成多个表单，数量和位置都不限）左右表单。上下表单。上中下，左右，下下左右。等等。。。。。。都可以。单个表单，多个表单（主表单+多个子表单） <div class="row "> <div class="col-xs-5 border form-1"> （上一项输入完成，想直接聚焦下一项）把表单当成一个表单元素使用。（主表单+多子表单）只有主表单才生成FormGroup，子表单直接传options） image.png 支持自定义模板，支持排序（order）。

2020-06-22

4.1K1

标签:

JS动态添加表单

<script type=”text/javascript”> function addRow()<!–js实现添加一行内容!–> { var tr=document.createElement(“tr”); var td=document.createElement(“td”); var input=document.createElement(“input”); input.setAttribute(“type”,”file”); input.setAttribute(“name”,”image[]”)

2018-05-07

19.5K0

标签:

antdv动态表单组件

分享一个自己写的antdv动态表单组件 <! -- 动态表单组件 --> <template> <div> <div v-for="(item, index) in value" :key="item[rowKey] || index" 建议指定为id */ rowKey: { type: String, default: () => '_key', }, /** * 指定动态表单表头和列 span: 6 }, wrapperCol: { span: 18 }, colon: false, }), }, /** * 表单补充说明', title: 'desc', placeholder: '请填入补充说明' }, ]" ></dynamic-form-item> 效果：支持动态增减表单行

2022-08-21

1.5K0

标签:

ElementUI——动态表单验证

前言版本更新迭代的时候，需要用到一个动态表单的功能，ElementUI刚好有教程就改改用咯步骤代码 <! -- 手机副号动态表单框 --> <el-form-item v-for="(domains, index) in formData.domains"

2024-08-16

1.1K0

标签:

ElementUI动态添加表单项

在实现这个动态表单项时一直报错脑瓜子嗡嗡的！不过好在昨天休息好了，今天起来趁脑瓜子好使，一会就弄好了。 seniority: 0, classIds: [ { classId: '' } ] } } } /* 动态添加表单行 this.addFom.classIds.push({ classId: '' }) : this.disabled = true }, /* 动态删除表单行 */ removeClassId 通过添加数组实现动态添加表单项

chao超的搬运文章

2023-10-15

9250

标签:

动态表单之表单组件的插件式加载方案

本文首发于政采云前端团队博客：动态表单之表单组件的插件式加载方案 https://www.zoo.team/article/dynamic-form-loading-method ? 前言关于动态化表单方案前面我们已经有过一次分享，没看过的同学可以看下之前的文章 ZooTeam 拍了拍你，来看看如何设计动态化表单。文章中提到随着业务差异化增多，我们采用了动态表单解决重复开发及逻辑堆叠的问题。随着动态化表单系统运行过程中业务方接入的越来越多，自定义组件插件式加载的需求开始出现并慢慢变得强烈。考虑到后期动态表单页面转本地代码的需求，希望插件还能被 npm 安装使用。这里采用了 UMD 规范。方案选取一、加载资源的方案采用动态插入 Script 方式实现 JS 资源加载。组件插件式引入的方式解决了，但是又引入了一个新的问题，一个表单页面如果有 10 个自定义组件的话，是不是就得动态加载 10 个静态资源呢，如果每个组件都有一个 JS，一个 CSS。

政采云前端团队

2021-02-24

3.4K0

标签:

Vue + Element ui 实现动态表单，包括新增行删除行动态表单验证提交功能

总结/朱季谦最近通过Vue + Element ui实现了动态表单功能，该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能，趁热打铁，将开发心得记录下来，方便以后再遇到类似功能时，直接拿来应用，因此，我就在<el-table>表格里面嵌套了<el-form>表单。 <el-button size="mini" @click="resetForm()">重置</el-button> </div> </div></template>定义一个存储动态表格数据的数组变量 $refs["data"].validate(valid => { //valid为true，表示表单都已经验证通过，若为false，说明存在表单验证失败 if (valid) --表格里面嵌套表单--> <el-form-item :prop="scope.

2023-07-11

7.3K0

标签:

自定义表单动态表单表单设计器流程引擎设计方案

当作废和完结任务时, 任务发起人会收到站内信消息通知 ---------------------------------------------------fhadmin.cn ---------------自定义表单定义模版：拖拽左侧表单元素到右侧区域，编辑表单元素，保存表单模版 29. 表单模版：编辑维护表单模版，复制表单模版，修改模版类型，预览表单模版 30. 我的表单：选择表单模版，编辑表单规则，是否上传图片、附件、开启富文本、挂靠流程开关等 31. 表单数据：从我的表单进去可增删改查表单数据，修改表单规则 32. 挂靠记录：记录表单数据和流程实例ID关联记录，可删除

2021-11-11

2.3K0

标签:

Vue + Element ui 实现动态表单，包括新增行删除行动态表单验证提交功能

总结/朱季谦最近通过Vue + Element ui实现了动态表单功能，该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能，趁热打铁，将开发心得记录下来，方便以后再遇到类似功能时，简化的页面效果图如下：最开始，我是用了纯粹的表格形式，后来发现，这种形式在提交的时候，不好对每个输入框做校验，若是表单形式话，就可以直接通过rule设置每个输入框的验证，因此，我就在表格里面嵌套了表单 el-button size="mini" @click="resetForm()">重置</el-button> </div> </div> </template> 定义一个存储动态表格数据的数组变量 $refs["data"].validate(valid => { //valid为true，表示表单都已经验证通过，若为false，说明存在表单验证失败 if (valid --表格里面嵌套表单--> <el-form-item :prop="scope.

2023-07-21

8.2K0

标签:

建模与表单的动态化设计

所有动态化，有两个角度，从产品运营人员的角度，处于流程中的表单可能随时需要调整一些策略，例如字段的限制，或者某些字段的增删；从开发人员的角度，我们不能用代码限定死表单及其囊括各方面的内容，而是需要在前后端配合下动态建模对于表单而言，我推崇先建模，当然，建模并不只适用于表单场景，任何场景都适用，只是需要考虑成本。但在建模时，我们往往需要去思考，在业务层面，我们需要什么，在交互层面我们需要什么。设计动态DSL语言我们不是要发明一门编程语言，我们是要解决动态化表单过程中，如何让描述文本具备更深的动态含义。解决眼前的问题，有利于我们减少瞎想乱想的可能性。动态表单对于产品化的动态表单而言，我们应该让用户进到产品里时，就可以立即进行表单设计。在表单设计过程中，再让用户来细化字段。解决复杂问题在实现动态化配置中，我们会面临几个非常复杂的问题，包括但不限于：字段的某些属性是根据其他字段的值动态得到的，应该怎么配置？怎么实现表单中可添加删除的列表数据？

www.tangshuang.net

2023-03-08

3.6K0

标签: