1.0.0 • Published 6 years ago
element-ui-render-form v1.0.0
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 | - | - |
示例
1.0.0
6 years ago