el-render-form
v1.0.0
Published
a vue component with element-ui form.
Downloads
8
Readme
el-render-form
环境
vue2.5+
element-ui 2.0+
安装
npm安装
npm i el-render-form -S
引入el-render-form
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ElRenderForm from 'el-render-form'
import App from './App.vue'
Vue.use(ElementUI)
Vue.use(ElRenderForm)
new Vue({
el: '#app',
render: h => h(App)
})
示例
<template>
<el-render-form
:edit="true"
:data="formData"
:fileds="fields"
:orders="orders"
:inline="true"
:model="formData"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="edit-form">
</el-render-form>
</template>
tip: 在el-form原有基础上加了edit,data,fileds,orders这几个props,el-form原有的不变
基本使用
export default {
data () {
return {
formData: {
name: '',
sex: 0,
birthday: '2018-01-01'
},
rules: {
name: { required: true, message: '姓名为必填', trigger: 'blur' }
},
fields: {
name: {
label: '姓名',
type: 'input',
props: {
type: 'text',
size: 'small',
placeholder: '请输入姓名'
}
},
sex: {
label: '性别',
type: 'select',
options: [
{ value: 0, label: '男' },
{ value: 1, label: '女' }
],
optionKey: {
type: Number
}
},
birthday: {
label: '生日',
type: 'date-picker',
props: {
'value-format': 'yyyy-MM-dd'
}
}
},
orders: ['name', 'sex', 'birthday']
}
}
}
tip: 以下只展示配置项修改内容
自定义非编辑状态的显示内容
fields: {
name: {
label: '姓名',
type: 'input',
render (h, { data, value, i }) {
return h(
'span',
`${value}(昵称)`
)
}
}
}
tip: 不清楚render函数的写法?vue 渲染函数&jsx
使用jsx
fields: {
sex: {
label: '性别',
type: 'select',
options: [
{ sex: 0, sexName: '男' },
{ sex: 1, sexName: '女' }
],
optionKey: {
value: 'sex',
label: 'sexName',
type: Number
}
}
}
tip: 这里的type: Number
指option中value的类型
自定义select中option的key
fields: {
name: {
label: '姓名',
type: 'input',
render (h, { data, value, i }) {
return (<span>{`${value}(昵称)`}</span>)
}
}
}
使用slot自定义
<el-render-form>
<span slot="sex" slot-scope="{ edit, data, value, i }">
{{ `现在是${edit ? '编辑' : '浏览'}状态,当前值是${value}` }}
</span>
</el-render-form>
fields: {
sex: {
label: '性别',
slot: 'sex'
}
}
当前问题
- 初始化数据data必须定义各个字段的默认值
// 错误
formData: {}
// 正确
formData: {
name: '',
sex: 0,
birthday: ''
}
- slot编辑状态与非编辑状态无法分开配置
Form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-----|-----|------|-------|-------| | data | 表单数据绑定对象 | object | - | - | | fileds | 表单各项配置对象(key要对应data上各项的key) | object | - | - | | orders | 表单各项排序 | array | - | 按照fileds顺序排序 |
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 }) | 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 } |