Element-form-dy NPM

xt-element-form

让 element-ui 的 form 使用起来更加简单。

安装

npm（推荐方式）

$ npm install element-form-dy

script

<script src="//cdn.jsdelivr.net/npm/element-form-dy@1.9.1817/lib/element-form-dy.js"></script>

快速开始

<template>
  <elementFormDy @submit="onSubmit" :formList="formList"></elementFormDy>
</template>

<script>
import elementFormDy from 'element-form-dy'

export default {
  components: {
    elementFormDy
  },
  data() {
    return {
      formList: [
        {
          title: '姓名',
          type: 'input',
          key: 'name'
        }
      ]
    }
  },
  methods: {
    onSubmit(form, valid) {
      console.log(form, valid)
    }
  }
}
</script>

标签大小写随你心情

<elementFormDy @submit="onSubmit" :formList="formList"></elementFormDy>

使用 element-ui 组件库

<elementFormDy lib="element" @submit="onSubmit" :formList="formList"></elementFormDy>

注意

如果你是 script 标签引入的，那么所有的参数要用小写，并且单词用 - 链接。
elementFormDy => element-form-dy
formList => form-list

element-form-dy 参数

参数	说明	类型	默认值
grid	网格，更多请看 demo	Number	-
gutter	当使用了 grid 属性时，设置此属性可以调整间距	Number, Array	-
formList	配置项（看下面 formList 参数）	Array	[]
notCtrl	是否不显示提交、重置按钮	Boolean	false
enterSubmit	如果设定这个值为 true，那么 input 按 enter 键会触发 submit 事件	Boolean	false
lib	可选值（'iview', 'element'），如果指定为 element 那么组件会按照 element 来渲染	String	'iview'
label-width	标签的宽度	Number	100
content-width	内容的宽度(支持百分比 auto)	Number, String	240
width	组件的宽度(只支持数值及百分比、auto写法，不支持固定的xxx px)	Number, String	-
options	iView 和 element-ui 原生 props ( :options="{size: 'small'}" )	Object	{}
submitText	提交按钮文本	String	'提交'
resetText	重置按钮文本	String	'重置'
hasSubmitBtn	是否显示提交按钮	Boolean	true
hasResetBtn	是否显示重置按钮	Boolean	true
clearable	控制是否显示清除 icon	Boolean	true
maxlength	默认全局 input 的 maxlength	Number	20
textareaMaxlength	默认全局 textarea 的 maxlength	Number	256
readonly	如果设定这个值为 true，那么该表单下所有的表单元素都会是 read
disabled	如果设定这个值为 true，那么该表单下所有的表单元素都会被禁用	Boolean	false	nly	Boolean	false

formList 参数

参数	说明	类型	默认值
ref	设置组件的ref，可在onInput第四参数、submit第三参数获取	String	''
title	显示的标签	String	''
width	单独设置组件宽度（不包括title宽度），未设置时默认使用contentWidth宽度(只支持数值及百分比、auto写法，不支持固定的xxx px)	Number,String	''
type	不同的类型默认值不同，具体看下面 type 的种类	String	''
key	可以监听 submit 事件，返回的 form 里面的 key 就是你定义的 key	String	''
rule	单个表单验证	Array/Object	-
defaultValue	item 的默认值, 参见type种类表	-	-
hasRow	isShow为false时是否保留空行	Boolean,Function(form, item)	true
isShow	isShow 为 false 会不显示这个元素，但会留空行，如不想留空行可再添加hasRow:false	Boolean,Function(form, item)	true
props	组件库自带的参数,可以参考 iview 或者 element 组件库的文档	Object	{}
attrs	组件库自带的参数,可以参考 iview 或者 element 组件库的文档	Object	{}
text	type 为 checkbox 或者 radio 时才有用，显示后面跟着的文字	String	''
options	type 为 select、checkbox-group、radio-group、cascader 时才有用，由 {value: 0, text: '苹果'} 组成，数据项支持异步	Array	[]
onInput	监听参数改变事件	Function	(value, item, form, currentRef, allRef)
render	自定义整行	Function	(h, item, form)
renderTitle	自定义标签	Function	(h, item, form)
renderContent	自定义内容主题	Function	(h, item, form)
renderOption	type 为 select 时才有用，可以自定义 select 的 option	Function	(h, option, item)
disabled	禁用表单元素，优先级比标签上的低	Boolean,Function(form, item)	false
settings	formItem 的标签属性，比如 style，class	Object	{}
border	当组件库为 element 时，type：radio-group checkbox checkbox-group, 可以让选项有 bogirder	Boolean	false
on	当前 content 的 on 配置项, 如果要监听 input 事件请使用 onInput	Object	{}
nativeOn	当前 content 的 nativeOn 配置项	Object	{}

type 种类

类型	默认值	其它
input	''	默认 maxlength: 20, textarea: 256
input-number	0	默认 min: 0, max: 9999999
select	null
checkbox	false
checkbox-group	[]
radio	false	没有意义，不建议使用
radio-group	''	String,Number
date	当前时间，new Date()
datetime	当前时间，new Date()
daterange	'', ''
datetimerange	'', ''
time	''
switch	false
slider	0
cascader	[]

内置方法

名称	说明	参数	返回值
clear	清除表单验证(暂时只支持element-ui)	-	-
reset	还原表单（默认会调用 clear）	-	-
getFormBykey	根据 key 来获取这个 key 在 form 的值	{ key: value, ... }	-
getForm	获取 form 的值	-	{ key: value, ... }
setForm	设置 form 的值	{ key: value, ... }	-
submit	手动触发 submit 事件	-	-
validateField	对部分表单字段进行校验的方法。仅当 lib 为 element 的时候，支持第一个参数是数组	(props: array or string, callback: Function(errorMessage: string)	-