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

当前问题

1. 初始化数据data必须定义各个字段的默认值

// 错误
formData: {}
// 正确
formData: {
  name: '',
  sex: 0,
  birthday: ''
}

2. 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 }