vue结合element自定义创建form表单

最新推荐文章于 2025-07-10 20:06:27 发布

约翰·塞纳

最新推荐文章于 2025-07-10 20:06:27 发布

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/u012429102/article/details/89395830

js 专栏收录该内容

8 篇文章

订阅专栏

为提升编程效率，特开发一款表单构建器，通过简单的操作即可快速生成表单页面，大幅减少重复工作，提高开发速度。

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

背景:在项目中需要用到大量的表单提交功能,每一个都要重新构建一个新的页面去使用,大大降低了劳动效率,

目的:在此背景下,为了能解放程序员的双手,特写了如下demo,还有功能每完善,先放个demo出来

接口文档:https://blog.youkuaiyun.com/u012429102/article/details/89510937

demo如下

http://fujianlijiahan.gitee.io/vue-element-form-build/#/

其中输入框功能是完善的,点击左侧的输入框按钮,在中间生成一个输入框后,右键点击输入框,弹出设置按钮,点击设置按钮配置相关配置项

http://fujianlijiahan.gitee.io/vue-form-build-dist/#/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

约翰·塞纳

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue自定义表单生成器form-create使用详解

12-08

介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。文档 | github 演示项目: 开源的高品质微信商城功能 自定义组件可生成任何Vue组件自带数据验证轻松转换为表单组件通过 JSON 生成表单通过 Maker 生成表单强大的API，可快速操作表单双向数据绑定事件扩展局部更新数据验证栅格布局内置组件17种常用表单组件对比 1.x

vue自定义表单生成

晴天有何特别

04-14

941

表单生成文字发得算比较晚吧，因为最近又开始使用vue开发项目，管理系统用表单表格相当多，还是简单写了一个使用vue+element-ui，提高开发速度，增加可维护性,减少页面代码量，使用json串的方式管理表单更方便,react的也写过，思路差不多，有不清晰的地方还请指出,完整版代码没必要放太多了 index.vue 归纳需要的表单组件接收一个数组，返回一个form对象（表单值） <!-- * @name:自定义表单生成 * @Author: 刘强 * @Date: 2021-04-13 14

1 条评论您还未登录，请先登录后发表或查看评论

【自定义表单】vue2 和ant design vue的自定义表单组件

最新发布

m0_52704391的博客

07-10

564

本文介绍了一个自定义表单组件的实现方案，该组件支持三种模式：新增(add)、编辑(edit)和查看(view)。组件采用JSON数据格式与后端交互，表单字段的label、type和placeholder均可自定义。文章详细展示了HTML模板结构、关键JavaScript逻辑和样式设计，包括表单字段的动态增删、不同类型字段的差异化配置（如文本输入、下拉选择、文件上传等）、必填项验证等功能实现。组件通过props接收模式参数和初始数据，并提供了多种事件回调。该方案实现了高度可配置的表单模板管理，适用于多种业务场

vue-自定义表单控件

tupianahz的博客

01-27

1302

题引开发中有遇到一些非传统表单元素，如选择地址组件，开发人员需要将用户选择的最终结果转换成后台指定的格式和其他表单元素一起提交给后台，这时候，如果能像传统表单元素，如input，radio这些直接使用v-model双向绑定，那样就方便很多。 ...

vue如何实现自定义表单

静幽水

10-27

3万+

自定义表单是什么？ 自定义表单顾名思义就是由用户定义表单，由用户觉定标签和组件，决定要填写什么格式的数据，用过腾讯文档的收集表单的一定见过下面的页面，这就是自定义表单。 自定义表单能做什么？典型的使用场景是信息收集表单或者是投票表单，上面的图片会对应的生成下面的表单，由其他用户填写，从而达到收集数据的功能。实现效果图：效果图如下，可以自定义文本，数字，单选按钮，多选按钮，下拉框等组件： ...

vue自定义表单

weixin_42178050的博客

06-10

853

http://211.159.185.23/vue-drag-formdesign/

vue+element创建动态的form表单及动态生成表格的行和列

10-16

在本文中，作者详细讲解了如何使用Vue.js框架配合Element UI库来创建动态表单以及动态生成表格的行和列。本文基于实例代码，从实际操作的角度出发，介绍了技术实现的过程和方法，具有很高的参考价值。首先，我们...

vue3Util:基于vue3 element-plus form表单二次封装

05-05

5. **Form表单组件**：Vue3Util可能会包含一个自定义的Form组件，这个组件可能集成了Element Plus的Form，并增加了自动绑定、验证、提交等功能，使得开发者可以更简单地创建和管理表单。 6. **自定义验证规则**：...

vue element自定义表单验证请求后端接口验证

12-30

做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 template 账户 prop=userid> <el v-model=addForm.userid></el> 引入接口 import { checkUseridRepeat...

vue+element自定义表单生成.rar

04-15

Vue.js的响应式数据绑定和计算属性等功能，结合Element UI的表单组件，可以让我们轻松创建动态、交互性强的表单。 1. **Vue.js中的数据绑定**：Vue.js的核心特性之一是双向数据绑定，通过`v-model`指令，我们可以将...

自定义表单（拖拽式表单）

08-16

通过拖放的方式创建表单jQuery formBuilder，基于jQuery formBuilder 略作修改，

vue 自定义表格

YUlangML的博客

11-26

2822

数据部分没用的地方我没挑出来。js部分没用的地方没调出来。dom部分主要用的是。

Vue深入-5【Vue中自定定义一个表单控件、watch】

Yesterday_Tomorrow的博客

12-10

331

(1).v-model在表单控件中 1.input控件 <input type="text" v-model="message"/> 2.select控件 <select v-model="result"> <option value="" disabled>请选择</option>//这样即可设置默认为请选择但是无法再次选择 <option v-for="subject in subjects"

Vue.js自定义事件的表单输入组件

xiechengjian的博客

01-05

1765

Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记： input v-model="something"> 这不过是以下示例的语法糖： input v-bind:value="something" v-on:input="something = $e

基于Vue构造器创建Form组件的通用解决方案

li420520的博客

11-02

2613

在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如 <template> <header></header> ... <...

（简单好用）基于VUE 2 Element Ui 的Form表单组件

syc123syc123syc的博客

11-07

1134

众所周知，摸鱼，偷懒，能写BUG是一个优秀前端的基本素养，Vue让前端程序员可以更加光明正大的偷懒了，组件化开发让我们可以封装一个又一个的组件，那组件肯定是得封装的方便又好用,不然怎么可以一次又一次的copy paste呢，这就给各位吴彦祖刘亦菲分享一个最近封装的表单组件，支持表单验证（可自定义），用法和Element Ui的form表单差不多但更省事更有助于咱摸鱼，收藏点赞都点点噻~ Form.vue(组件本体) 这个是组件本体直接在components里面创建文件贴进去就可以拉，使用方法在下面~

element-ui 二次封装多功能自定义form组件

qq_53675083的博客

07-09

1314

功能介绍:1.可统计form表单中选中数据的个数2.数据默认只展示一排，会根据屏幕大小适配一行放几个el-form-item，最少两个，超过一行时，会出现更多筛选按钮，点击更多筛选展示全部搜索条件，将所有el-form-item宽度同意设置成215px宽度，暴露查询重置方法给父级效果图上代码...

Vue element 自定义表单验证（手机号举例）

热门推荐

程序猿踩坑集锦

06-29

4万+

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="手机号" prop="phone"> <el-input

vue element自定义表单设计

01-23

### 使用 Vue 和 Element UI 进行自定义表单设计 #### 安装依赖库为了创建基于 Vue 的项目并集成 Element UI 组件，需先安装必要的开发工具。假设已经全局安装了 `vue-cli` 工具，可以通过如下命令初始化一个新的 Vue 项目[^1]。 ```bash vue create my-project cd my-project npm install element-ui --save ``` #### 配置Element UI 在项目的入口文件(main.js)中引入整个 Element 或按需加载所需组件来减少打包体积： ```javascript // 引入全部样式 import 'element-ui/lib/theme-chalk/index.css'; // 引入所有组件 import ElementUI from 'element-ui'; Vue.use(ElementUI); ``` 对于按需导入的方式，则可以借助于 `babel-plugin-component` 插件实现只加载实际使用的部分。 #### 创建自定义表单页面新建一个名为 `CustomForm.vue` 文件用于构建具体的表单项布局结构。这里展示了一个简单的登录界面例子: ```html <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">  <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item>  <el-form-item label="密码" prop="password"> <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input> </el-form-item>  <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; return { ruleForm: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [{ validator: validatePass, trigger: 'blur' }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script> ``` 此模板展示了如何利用 `<el-form>` 及其子标签快速搭建出美观易用的数据录入区域，并通过内联 JavaScript 方法处理验证逻辑以及交互事件响应。