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 | - | - |

示例

示例文档