本文将介绍form-create如何修改,隐藏默认提交按钮

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

如果对您有帮助,您可以在 GitHub 上给作者点个"Star" 支持一下 谢谢!

隐藏默认按钮

首先通过设置全局配置隐藏默认的提交按钮和重置按钮

  1. {
  2. submitBtn: false,
  3. resetBtn: false
  4. }

生成自定义按钮组件

示例中使用的是 ElementUI

  1. [
  2. {
  3. type: 'input',
  4. field: 'field-1',
  5. title: 'test',
  6. value: 'test submit',
  7. col: {
  8. span:6
  9. }
  10.  
  11. },
  12. {
  13. type: 'el-button',
  14. on: {
  15. click: function(){
  16. //TODO 提交表单
  17. $f.submit();
  18. //或者
  19. $f.resetFields();
  20. }
  21. },
  22. col: {
  23. span:3,
  24. push: 1
  25. },
  26. children: ['submit']
  27.  
  28. }
  29. ]

form-create教程系列:

form-create教程:移除默认提交按钮

form-create教程:给内置组件和自定义组件添加事件

form-create教程:自定义布局,实现一行多个组件

form-create教程:移除默认提交按钮的更多相关文章

  1. 一个form表单,多个提交按钮

    技巧就是把提交的input的类型改成button!这样就可以实现多个按钮提交! 以下是案例: <form action="" id="tijiao"> ...

  2. 如何为Form表单的多个提交按钮指定不同的Action地址?

    这是我很久以前看到的一个技巧,但我忘记在哪里了,当时遇到这样的需求,做了笔记,现在整理成文章分享出来,因为我感觉这个小技巧还是挺有用的,这种应用场景也算比较常见,比如一个表单有"保存&quo ...

  3. 一个Form表单多个Submit提交按钮!实现提交不同的参数!

    给 submit 的按钮加onclick 方法来自定义预处理参数,比如<script type="text/javascript">function submitFun ...

  4. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  5. HTML 之 Web页面表单form中只有一个input的text元素,按回车默认提交

    WEB开发中,如果页面的 form 中只有一个input元素,在该input元素的输入框中按回车(注:此时并没有写对应的onkeydown等事件处理),则浏览器会默认提交表单,请看如下代码: < ...

  6. Form表单三种提交按钮的区别?

    1.<input type='button' id='btn' onclick='check()' value="提交"> 说明:只是普通的按钮(不附带提交功能),不会 ...

  7. form表单的默认提交行为

    一 如果<form></form>表单中只有一个<input type="text"/>,则使文本框获取焦点,并单击回车,form会自动提交. ...

  8. 获取form表单默认提交的返回值

    1.经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并 ...

  9. 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型

    通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...

随机推荐

  1. java获取两个日期之间的所有日期

    java获取两个日期之间的所有日期   解决方法: 1.核心方法 private List<String> getBetweenDates(String start, String end ...

  2. jsp中cookie的一个报错

    写项目时在一个jsp页面中使用了cookie,用逗号分隔的数据,服务器老报错,搞了一个小时,终于清楚了,jsp的cookie中不能使用逗号. cookie规则:这个规则用于jsp.asp中(下面这两句 ...

  3. Qt编写控件属性设计器8-网络采集

    一.前言 上一篇文章已经打通了数据源之一的串口采集,这次要说的是网络采集,网络通信目前用的最多的是三种,TCP/UDP/HTTP,其中tcp通信又包括了客户端服务端两种,tcp通信才用了多次握手机制不 ...

  4. Apache配置优化一(查看当前apache数据)

    1.查看当前的运行模块 httpd -l 2.查看httpd进程数 ps -ef | grep httpd | wc -l 3.查看请求80服务的client ip按照连接数排序 netstat -n ...

  5. iOS摄像头和相册(转)

    iOS摄像头和相册iOS 获取图片有三种方法1. 直接调用摄像头拍照 2. 从相册中选择 3. 从图库中选择 UIImagePickerController 是系统提供的用来获取图片和视频的接口: 用 ...

  6. jenkins:构建机器为windows,部署机器为linux

    备份老的jar包 d=`date +"%Y%m%d-%H%M%S"` cd /home/eccore/app/uat -SNAPSHOT.jar steward-api--SNAP ...

  7. yml 文件中使用环境变量

    Spring Boot 中可以用 spring.profiles.active 参数来指定系统环境,让系统加载不同的配置文件. 可以在程序启动的时候加上参数来指定需要的配置 java -Dspring ...

  8. [转帖]详解Linux系统inode原理--硬链接、软链接、innodb大小和划分等

    详解Linux系统inode原理--硬链接.软链接.innodb大小和划分等 原创 波波说运维 2019-07-17 00:03:00 https://www.toutiao.com/i6713116 ...

  9. Android MTK6580 客制化关机充电动画

    1.客制化关机充电图片 vendor/mediatek/proprietary/bootable/bootloader/lk/dev/logo/xxx 找到对应分辨率替换 2.调整显示图片位置.大小 ...

  10. 什么是SSH 以及常见的ssh 功能

    什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露. ...