封装通用el-form表单（2种方式）
1、序言
项目地址：git clone form-demo: 封装通用el-form
一个后台管理系统最常见的是表单，表单最常见的是输入框、下拉选择、日期选择、单选、复选框等等， 系统添加若干模块，就复制粘贴若干个el-form、el-form-item，有一说一，完成需求快是快，但是代码冗余的部分太多了，能不能通过配置方式，自动生成el-form、el-form-item
不封装代码前：
封装代码后：
两种封装方式的变量、方法名基本一致！
2、自定义组件方式封装el-form
2.1、封装
（1）新建commentForm文件夹，并创建index.vue文件
（2）index.vue中
{{ item.text }}
（3）注意事项：
- el-checkbox中v-model绑定的值要事先存在，不然就会报出无法找到length属性的错误
所以提前在data中声明一个数组，v-model绑定这个数组，返回表单给父组件时，将其添加到表单对象中，重置表单时，使这个数组为空即可实现重置表单功能！
- 重置不成功的原因可能是：（1）未添加prop （2）prop绑定的值与model绑定的对象所对应的属性不一致
2.2、使用
重点关注部位：
（1）formItemList中的type决定生成什么类型的表单项，如输入框、下拉选项等等
（2）formItemList中的model表示表单项双向绑定的名称，也是子组件返回对象给父组件中对象的属性名
（3）formItemList中的options表示下拉选项、复选框、单选按钮的选项值
（4）@submitForm绑定的事件可以获取子组件返回给父组件经过校验的表单，通常不在子组件进行网络请求，让父组件进行网络请求
（5）父组件通过$refs获取组件实例从而调用子组件重置表单、提交表单的方法
3、jsx方式封装el-form
jsx封装方式借鉴了这篇文章：element-ui 通用表单封装及VUE JSX应用 - 掘金
3.1、封装
（1）上篇博客有简单介绍jsx：两种方式对el-table二次封装_码上编程的博客-CSDN博客
（2） 新建jsxForm文件夹，并创建index.js文件
（3）封装代码：
代码逻辑图如下：
export default {
name: 'jsxForm',
props: {
// 生成el-form-item的数组
formItemList: {
type: Array,
default: () => [],
},
// 是否行内表单模式
inline: {
type: Boolean,
default: false,
},
// el-form-item的label宽度
labelWidth: {
type: String,
default: '100px',
},
// 表单校验规则
rules: {
type: Object,
default: () => { },
},
// 按钮列表
buttonList: {
type: Array,
default: () => [],
}
},
data() {
return {
form: {},
checkboxList: []
}
},
methods: {
// 生成选项
generateOption(itemObj) {
let options = []
for (let index = 0; index < itemObj.options.length; index++) {
const item = itemObj.options[index]
switch (itemObj.type) {
// 下拉菜单
case 'select':
options.push({item.label} )
break
}
}
return options
},
// 生成下拉菜单
generateSelect(item) {
return {this.generateOption(item)}
},
// 生成多选框
generateCheckbox(item) {
this.form[item.model] = this.checkboxList
return {this.generateOption(item)}
},
// 生成单选
generateRadio(item) {
return
{this.generateOption(item)}
},
// 生成输入框
generateInput(item) {
return (
},
// 生成表单项
generateFormItems(list = []) {
let formItems = []
list.forEach(item => {
let formItemContent = ''
switch (item.type) {
// 下拉菜单
case 'select':
formItemContent = this.generateSelect(item)
break
// 单选框
case 'radio':
formItemContent = this.generateRadio(item)
break
// 输入框
case 'input':
formItemContent = this.generateInput(item)
break;
// 开关
case 'switch':
formItemContent = this.generateSwitch(item)
break;
// 日期
case 'date-picker':
formItemContent = this.generateDate(item)
break;
// 复选框
case 'checkbox':
formItemContent = this.generateCheckbox(item)
break;
default:
break
}
formItems.push({formItemContent} )
})
return formItems
},
// 按钮列表
generateBtnList() {
let buttons = []
this.buttonList?.forEach(item => {
buttons.push( item.event()}>{item.text} )
})
return buttons
},
// 重置表单
resetForm() {
// 重置复选框
this.checkboxList = []
this.$refs.form.resetFields();
},
// 返回经过校验的表单
returnForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.$emit('submitForm', this.form)
}
})
}
},
render() {
return (
{this.generateFormItems(this.formItemList)}
{this.generateBtnList()}
)
}
}3.2、使用