java form表单重置_[Java教程]vue中怎么动态生成form表单

[Java教程]vue中怎么动态生成form表单

0 2021-02-16 18:00:12 快速生成一个具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。

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

文档 | GitHub

支持 UIelement-ui

iview/view-design

ant-design-vue

新增功能

2.5版本主要更新了一下功能:重构内部核心代码

优化内部渲染机制

优化内部生命周期事件

重构 TypeScript

新增 nextTick方法,设置渲染后的回调

新增 支持分页加载组件,加速首屏渲染

新增 自定义配置项effect

新增 支持修改type

新增 control支持配置规则插入位置

优化 control符合条件的都会生效,之前版本只能生效第一个

新增 支持给组件配置前缀后缀 prefix, suffix

新增 update配置,value发送变化后触发

新增 支持 wrap 配置项,配置FormItem

新增 object 组件

新增 支持自定义title,info组件

新增 富文本组件wangEditor

新增 原生事件支持事件注入

支持 value.sync 获取双向绑定的 formData

优化 默认的表单提交按钮

安装根据自己使用的 UI 安装对应的版本

element-ui 版本npm i @form-create/element-ui

iview@2.x|3.x 版本npm i @form-create/iview

iview/view-design@4.x 版本npm i @form-create/iview4

ant-design-vue@1.5+ 版本npm i @form-create/ant-design-vue

快速上手本文以element-ui为例在 main.js 中写入以下内容：import Vue from 'vue'import ELEMENT from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import formCreate from '@form-create/element-ui'Vue.use(ELEMENT)Vue.use(formCreate)生成表单

在线示例export default { data() { return { //实例对象 fApi: {}, //表单数据 value: {}, //表单生成规则 rule: [ { type: 'input', field: 'goods_name', title: '商品名称' }, { type: 'datePicker', field: 'created_at', title: '创建时间' } ], //组件参数配置 option: { //表单提交事件 onSubmit: function (formData) { alert(JSON.stringify(formData)) } } } }}

功能介绍

1. 自定义组件

form-create 支持的在表单内部生成任何 vue 组件

在线示例

例如生成一个el-button组件:{//type 可以是内置组件名称,也可以是vue组件名称或者 html 标签type: 'el-button', //...children: ['按钮内容']}

生成一个 html 标签{//type 可以是内置组件名称,也可以是vue组件名称或者 html 标签type: 'span', //...children: ['span内容']}

注意! 生成的组件必须挂载到全局或者通过 form-create 挂载

通过 Vue 挂载Vue.component(component.name, component);

通过 form-create 挂载formCreate.component(component.name, component);

2. 自定义布局

通过设置配置项col或者栅格组件可以实现对组件的布局

在线示例

通过配置项col设置组件布局,设置一行显示两个组件[{ type:'input', field:'input1', title:'input1', col:{span:12}},{ type:'input', field:'input2', title:'input2', col:{span:12}},]

通过栅格组件设置一行显示三个组件{type:'el-row', children: [ { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] }, { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] }, { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] } ]}

3. 组件前后缀

通过生成规则的prefix属性配置组件的前缀,suffix属性配置组件的后缀

在线示例{ type:'input', field:'text', title:'text', prefix:'prefix', suffix:'suffix',}

设置前后缀为自定义组件{ type:'input', field:'text', title:'text', value:'default', prefix:{ type:'ElButton', children:['prefix'] }, suffix:{ type:'ElButton', children:['suffix'] },}

4.组件联动

可以通过control配置项实现通过组件的值控制其他组件是否显示

在线示例

例如当评价小于3星时输入差评原因{ type:'rate', field: 'star', title:'评分', value:5, control:[ { handle(val){ return val < 3 }, rule:[ { type:'input', field:'info', title:'差评原因', value:'default info', } ] } ]}参数说明类型value当组件的值和value全等时显示rule中的组件string|Number|Bool

handle当handle方法返回true时显示rule中的组件Function

rule该组件控制显示的组件Array

append设置rule中的规则追加的位置string

prepend设置rule中的规则前置插入的位置string

child设置rule是否插入到指定位置的children中,默认添加到当前规则的 children 中Boolean

注意! handle优先级大于value,所有符合条件的control都会生效

5. 表单验证

可以通过 validate 配置项设置组件的验证规则,自定义的表单组件也支持校验

在线示例

例如设置input 组件必填{type:'input',//...validate:[{required:true, type:'string', message:'请个输入内容'}]}参数说明类型默认值enum枚举类型string-

len字段长度number-

max最大长度number-

message校验文案string-

min最小长度number-

pattern正则表达式校验RegExp-

required是否必选booleanfalse

transform校验前转换字段值function(value) => transformedValue:any-

type内建校验类型，可选项string'string'

validator自定义校验function(rule, value, callback)-

whitespace必选时，空格是否会被视为错误booleanfalse

注意!type需要根据组件的value类型定义

APi 介绍

下列是常用的方法

完整的Api介绍

设置表单值

覆盖方式,未定义的字段会设置为 nulltype coverValue = (formData:{[field:string]:any}) => void用法：fApi.coverValue({goods_name:'HuaWei'})

合并方式,未定义的字段不做修改interface setValue { (formData:{[field:string]:any}): void (field:string, value:any): void}用法：fApi.setValue({goods_name:'HuaWei'})

别名方法changeValue, changeField

隐藏字段interface hidden { //隐藏全部组件 (status:Boolean):void //隐藏指定组件 (status:Boolean, field:string):void //隐藏部分组件 (status:Boolean, field:string[]):void }用法：fApi.hidden(true, 'goods_name')

获取组件隐藏状态type hiddenStatus = (field:string)=>Boolean用法：const status = fApi.hiddenStatus('goods_name')

获取规则interface getRule { (field:string):Rule (field:string, origin: true): FormRule}用法：const rule = fApi.getRule('goods_name')

插入规则

前置插入interface prepend { //插入到第一个 (rule:FormRule):void //插入指定字段前面 (rule:FormRule, field:string):void //插入到指定字段 children 中 (rule:FormRule, field:string, child:true):void}用法：fApi.prepend({ type:"input", title:"商品简介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "请输入商品简介", }, validate:[ { required: true, message: '请输入商品简介', trigger: 'blur' }, ],}, 'goods-name')

后置追加interface append { //插入到最后一个 (rule:FormRule):void //插入指定字段后面 (rule:FormRule, field:string):void //插入到指定字段 children 中 (rule:FormRule, field:string, child:true):void}用法：fApi.append({ type:"input", title:"商品简介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "请输入商品简介", }, validate:[ { required: true, message: '请输入商品简介', trigger: 'blur' }, ],}, 'goods-name')

删除指定规则type removeRule = (rule:FormRule) => FormRule用法：const rule = {type:'input', /** ... **/}fApi.removeRule(rule)

验证表单type validate = (callback:(...args:any[]) => void)=> void用法：fApi.validate((valid, fail) => { if(valid){ //todo 表单验证通过 }else{ //todo 表单验证未通过 }})

验证指定字段type validateField = (field, callback:(...args:any[]) => void)=> void用法：fApi.validateField('goods_name', (valid, fail) => { if(valid){ //todo 字段验证通过 }else{ //todo 字段验证未通过 }})

获取表单数据interface formData { //获取全部数据 (): {[field:string]:any } //获取部分字段的数据 (field:string[]): {[field:string]:any }}用法：const formData = fApi.formData()

修改提交按钮type submitBtnProps = (props:Object) => void用法：fApi.submitBtnProps({disabled:true})快捷操作:fApi.btn.loading(true) 设置提交按钮进入loading状态

fApi.btn.disabled(true) 设置提交按钮禁用状态

fApi.btn.show(true) 设置提交按钮显示状态

修改重置按钮type resetBtnProps = ( props:Object) => void用法：fApi.resetBtnProps({disabled:true})快捷操作:fApi.resetBtn.loading(true) 设置重置按钮进入loading状态

fApi.resetBtn.disabled(true) 设置重置按钮禁用状态

fApi.resetBtn.show(true) 设置重置按钮显示状态

隐藏表单type hideForm = (hide:Boolean)=>void用法：fApi.hideForm(true)

提交表单type submit = (success: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void用法：fApi.submit((formData, fapi) => { //todo 提交表单},()=>{ //todo 表单验证未通过})

如果对您有帮助，您可以在GitHub上点 'Star' 支持一下 谢谢！

本文网址：http://www.shaoqun.com/a/559576.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

HTMLCSSVUE

0