element-form-dy

v1.9.1822

Published

3 months ago

Configuration element form

Downloads

0High
0Medium
0Low

sunnyhills

element-ui vue vue.js components ui

xt-element-form

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

安装

npm（推荐方式）

$ npm install element-form-dy

script

<script src="//cdn.jsdelivr.net/npm/[email protected]/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 种类

内置方法

| 名称 | 说明 | 参数 | 返回值 | | - | - | - | - | | 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) | - |

事件

| 名称 | 说明 | 返回类型 | 返回值 | | - | - | - | - | | submit | 提交按钮的点击事件 | Object | (form, valid) |

更新日志

1.9.1822

reset重置时可选择传true来过滤禁用的项

1.9.1820

disabled 加入form传值

1.9.1814

单个组件中返回所有ref的值
单个组件添加function类型，简单的判断disabled的值

1.9.1810

修改清除验证方法，可单项清除

1.9.18

下拉框、单选框、多选框添加单条禁用

1.9.16

表单项添加ref，可以使用$refs，input返回当前form的refs

1.9.5

title为空时不渲染title的标签

1.9.3

下拉框添加 disabled，用以禁用部分选择项

1.9.0

添加 validateField，单项表单验证

1.8.1

修复 clear 清空表单无法清空的 bug

1.8.0

修复样式错误的 bug

1.7.0

修复 renderTitle 和 render 函数没有 form 的bug

1.6.0

修复在父组件使用 render（render，renderTitle，renderContent）时，设置 ref 会获取不到对象
添加 clear 清除方法

1.5.0

支持每个组件的 on 与 nativeOn 配置

1.4.0

当组件库为 element 时，type：radio-group checkbox checkbox-group 支持 border 属性

1.3.0

删除 readonly，因为只能作用于几种类型（input, select），作用不大
添加 cascader 类型，跟 select 的用法类似 [{ value: 'xxx', text: 'xxx' }, ...]

1.2.0

删除不必要的提示

1.1.5

添加标签的 gutter 属性
content-width 支持 auto 100% 值

1.1.4

修改 1.1.3 失效问题

1.1.3

添加 item 的 setting 属性，可以在 formItem 上添加样式了

1.1.2

添加全局和单体 readonly 属性

1.1.1

添加 type: time 类型
修改 reset 方法不能清空验证

1.1.0

添加 type: input-number 类型
添加 maxlength 和 textareaMaxlength 属性，分别作用于 input 和 textarea 上，默认值分别是 20 、256
添加 setForm 方法
修改 datetimerange 的默认宽度为 360
修改 textarea 如果设置了 enterSubmit，不再触发 submit 事件
修改 element-ui 的 placeholder 现在可以写在 props 里

1.0.12

可以在网页里面用 script 标签引入啦！

1.0.11

修复 options、submitText、resetText、hasSubmitBtn、hasResetBtn 失效的原因

1.0.10

isShow 属性，可以使用方法了
添加 clearable 属性，默认为 true

1.0.9

添加 isShow 属性

1.0.8

修改 tpye 为 switch 时 props 不生效

1.0.7

修改 input 的 placeholder 需要添加在 attrs 里面
添加 formList 的 render 函数

1.0.6

修改重置按钮跟提交按钮重复的问题

1.0.5

添加 options 自定义组建自带 props 属性
添加 hasSubmitBtn、hasResetBtn 自定义是否显示按钮属性
添加 submitText、resetText 自定义按钮文本属性
删除 autocomplete 属性

LICENSE

MIT