JinboMa / element-ui-render-form

A component with element-ui for form.

element-ui-render-form

简介

element-ui-render-form是一个基于element-ui组件之上的自定义封装组件。

在使用element-ui时，其form及相关组件(form-item, input, select, date-picker等)在渲染大量表单时使用起来非常麻烦，尤其是template的复杂配置。

element-ui-render-form就是一个为了简化element-ui中form组件的使用而开发的组件，在渲染大量表单时非常的好用。

安装

element-ui-render-form依赖vue2.5+和element-ui 2.0+

npm i element-ui-render-form -S

项目引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ElRenderForm from 'element-ui-render-form'
import App from './App.vue'

Vue.use(ElementUI)
Vue.use(ElRenderForm)

new Vue({
  el: '#app',
  render: h => h(App)
})

配置

props

参数	说明	类型	可选值	默认值
data	表单数据双向绑定的对象	object	-	-
fileds	表单各项配置对象（key要对应data上各项的key）	object	-	-
orders	表单各项排序	array	-	按照fileds顺序排序
edit	表单是否为编辑状态	boolean	-	false

fileds 配置项

参数	说明	类型	可选值	默认值
label	表单的label显示内容	string	-	-
type	编辑状态下表单类型	string	input/select/date-picker	input
props	绑定在表单组件(input/select/date-picker)上的props	object	-	-
render	非编辑状态下显示的内容	function	-	function(h: renderFunction, option: { data: 表单数据对象, value: 当前项的值, i: 当前项的key })
editRender	编辑状态下显示的内容	function	-	function(h: renderFunction, option: { data: 表单数据对象, value: 当前项的值, i: 当前项的key })
options	type为select时的选择项	array/object	[{ value: any, label: string }, ...]/{ [value]: label, ... }	-
optionKey	options选项的value与label自定义key与类型	object	{ type: Number / String }	{ value: 'value', label: 'label', type: String }
slot	使用slot自定义显示内容	string	-	-

示例

示例文档