element-ui通用表单封装VUE JSX应用

一、存在及需要解决的问题
一般在做后台OA的时候会发现表单重复代码比较多，且逻辑基本一样，每次新加一个表单都需要拷贝基本一致的代码结构，然后只是简单地修改对应的字段进行开发
二、预期结果
提取重复的表单逻辑形成通用的组件，通过约定的JSON数据结构配置生成表单
1、使用方法

复制代码
接收的props:
isResetFormFlag：是否更新表单内容标志，用于触发更新表单的formModel
formOption：表单配置，下有详细配置说明
isDisabled：表单是否可编辑
2、单一表单组配置
{
name: 'channel-form',
data: {},
items: [
{
label: '类型',
name: 'biz_type',
type: 'select',
dataList: [{
index: 1,
text: '业务部'
}]
}
],
rules: {
name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
},
btnList: [{
text: '保存',
type: 'primary',
onClick: this.commitForm
}]
}
复制代码
3、多表单组配置
formOption: {
name: 'channel-form',
data: {},
groups: [{
title: '',// 组标题
tips: ''// 组提示
items: [] // 组表单项，和单一组配置一致
}]
}
复制代码
三、实现逻辑
根据配置输出不同的form-item，需要特殊处理的表单项通过jsx由使用的地方自定义实现
四、配置文档
节点 描述 类型 是否必须 备注
name 表单名 String 否 默认名 oa-form
data 表单数据 Object 否 用于编辑场景异步请求的表单填充数据
groups 表单组 Array 否 groups 和 items 不应该同时存在，groups 中包含了items，如果groups为空取外部的items渲染，groups不为空仅渲染groups组内容
items 表单项 Array 否 支持的type类型：输入框：input、textarea;多选框：checkbox;单选框：radio;下拉菜单：select
rules 表单校验规则 Object 否 节点名需要与items配置的name一一对应
btnList 按钮列表 Array 否 会在回调函数包含表单的数据及表单引用
六、VUE JSX 遇到的一些问题
v-model支持： babel-plugin-jsx-v-model
sync 修饰符写法
visible={ this.dialogImgVisible } {...{on: {'update:visible': (val) => { this.dialogImgVisible = val }}}}
复制代码
七、部分实现代码
1、生成列表
generateList (itemObj) {
let itemEle = []
for (let index = 0; index < itemObj.dataList.length; index++) {
const item = itemObj.dataList[index]
switch (itemObj.type) {
// 下拉菜单
case 'select':
itemEle.push()
break
// 多选框
case 'checkbox':
itemEle.push({ item.text })
break
// 单选框
case 'radio':
itemEle.push({ item.text })
break
}
}
return itemEle
}
复制代码
2、生成下拉菜单
generateSelect (item) {
return { this.generateList(item) }
}
复制代码
备注：其他项实现类似
3、render函数
render (h) {
let ele = []
// 表单内容
if (this.isGroup) {
ele = this.generateGroup()
} else {
ele = this.generateFormItems(this.formOption.items)
}
// 按钮列表
let btnListEle = []
this.formOption.btnList.forEach((btn) => {
btnListEle.push( { btn.onClick(this.$refs[this.formName], this.formModel) } }>{ btn.text })
})
return (

)
}
复制代码
八、最后贴一个表格的封装
<script>
export default {
props: {
// 表格列
columns: {
type: Array,
default: _ => { return [] }
},
// 表格数据
tableData: {
type: Array,
default: _ => { return [] }
},
// loading 标志
loading: {
type: Boolean,
default: false
}
},
methods: {
sortChange (obj) {
this.$emit('sortChange', obj)
}
},
render () {
return (
{ this.sortChange(obj) } } style="width: 100%">
{
this.columns.map(columnObj => {
return {...{
scopedSlots: {
default: scope => {
return columnObj.hasOwnProperty('render') ? columnObj.render(scope.index, scope.row) : scope.row[columnObj.prop]
}
}
}}
>

})
}

)
}
}
</script>
复制代码
1、使用方法

复制代码
2、columns 配置
{
label: '',
prop: '',
width: '100',
sortable: true
render: ()=>{}
}
复制代码
自定义配置渲染，传入render函数，如果有render函数，优先使用render函数结果。