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

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

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

隐藏默认按钮

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

{
submitBtn: false,
resetBtn: false
}

生成自定义按钮组件

示例中使用的是 ElementUI

[
{
type: 'input',
field: 'field-1',
title: 'test',
value: 'test submit',
col: {
span:6
} },
{
type: 'el-button',
on: {
click: function(){
//TODO 提交表单
$f.submit();
//或者
$f.resetFields();
}
},
col: {
span:3,
push: 1
},
children: ['submit'] }
]

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. OpenNebula概述

    OpenNebula概述 OpenNebula是专门为云计算打造的开源系统,用户可以使用Xen.KVM.VMware等虚拟化软件一起打造企业云.利用OpenNebula可以轻松构建私有云.混合云.公开 ...

  2. Python Re 模块超全解读

    re模块下的函数 compile(pattern):创建模式对象 import re pat=re.compile('A') m=pat.search('CBA') #等价于 re.search('A ...

  3. C# using语句 中间出现exception后 using仍然会dispose

    C# using语句,中间出现exception后,using仍然会dispose,因为: using语句 相当于 try-finally{dispose()}

  4. NET-使用Js调用WebService

    注:JsWebServiceObject 此类是我做测试示例时为了测试js是否能调用webService中的复合类型而单独新建的一个类 此类中只有名字与年龄的属性. 最近身边的一个朋友做项目,其中有一 ...

  5. java 画图 Graphics 文字自动换行

    /** * 文字超出限定长度自动换行 * * @param g 画布 * @param font 字体样式 * @param text 文字 * @param widthLength 最大长度 (多少 ...

  6. 【VS开发】【CUDA开发】如何在MFC中调用CUDA

    如何在MFC中调用CUDA 有时候,我们需要在比较大的项目中调用CUDA,这就涉及到MFC+CUDA的环境配置问题,以矩阵相乘为例,在MFC中调用CUDA程序.我们参考罗振东iylzd@163.com ...

  7. eNSP——静态路由的基本配置

    原理: 静态路由是指用户或网络管理员手工配置的路由信息.当网络的拓扑结构或链路状态发生改变时,需要网络管理人员手工修改静态路由信息. 相比于动态路由协议,静态路由无需频繁地交换各自的路由表,配置简单, ...

  8. HTML 5 全局 contenteditable 属性

    contenteditable 可以将标签设置为可输入的input,textarea, 但是在ios上,点击或者点击很久input输入框才出来,兼容ios的方法是加一个   -webkit-user- ...

  9. python中append、extend、和insert的区别

    a_list = [x for x in range(1, 11)] print(a_list) a_list.append('sdadfewf') # 将整个字符串放到列表的最后 print(a_l ...

  10. 串口控制RGB灯程序

    实验目的: 通过上位机给串口发送数据(字符); STM32收到数据进入中断程序原封不动返回上位机,并且根据收到的信息产出相应的进行操作.(1- led_on  2 – ledoff...); 源码   ...