前言
最近公司由于业务的调整,之前的超长表单的逻辑改动较多,所以我就打算重构了(之前是一个已离职的后台写的,也没有注释,一个组件写了4000+行,实在有心无力)。为了各位方便阅读,我这里把项目里拆分了14个组件
进行了精简
整体思路
- 大表单根据业务模块进行拆分
- 保存时使用
el-form
提供的validate
方法进行校验(循环对每一个拆分的组件进行校验) - mixin 对每个组件的公共提取(也利于后期项目的维护)
开始
- 这里以
拆分2个组件
为例:form1
,form2
(方便读者观看,命名勿喷) - 这里两个组件为什么
ref、model
绑定的都是form
后边会进行说明(为了方便后期维护)
// form1 组件
<template>
<el-form
ref="form"
:model="form"
label-width="10px"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Form1',
props: {
form: {}
},
data() {
return {
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
}
}
},
methods: {
// 这里是是为了父组件循环调用校验
validForm() {
let result = false
this.$refs.form.validate(valid => valid && (result = true))
return result
}
// 我这里还用了另一种方式写的,但是循环校验的时候是promise对象,有问题,望大佬们指点一二
validForm() {
// 明明这里输出的结构是 Boolean 值,但在父组件循环调用之后就是promise类型,需要转换一下才行
return this.$refs.form.validate().catch(e => console.log(e))
}
}
}
</script>
// form2 组件
<template>
<el-form
ref="form"
:model="form"
label-width="10px"
>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age" />
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Form2',
props: {
form: {}
},
data() {
return {
rules: {
name: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
}
}
},
methods: {
// 这里是是为了父组件循环调用校验
validForm() {
let result = false
this.$refs.form.validate(valid => valid && (result = true))
return result
}
}
}
</script>
- 看一下父组件怎么引用的
// 父组件
<template>
<div class="parent">
<form1 ref="form1" :form="formData.form1" />
<form2 ref="form2" :form="formData.form2" />
<el-button type="primary" @click="save">报错</el-button>
</div>
</template>
<script>
... 省略引用
export default {
name: 'parent',
... 省略注册
data () {
return {
formData: {
form1: {},
form2: {}
}
}
},
}
</script>
- 由于
formData
里的属性名form1
和form2
分别用在子表单组件的ref
上,因此可以在遍历时依次找到他们,修改保存函数,代码如下:
methods: {
save () {
// 每个表单对象的 key 值,也就是每个表单的 ref 值
const formKeys = Object.keys(this.formData)
// 执行每个表单的校验方法
const valids = formKeys.map(item => this.$refs[item].validForm())
// 所有表单通过检验之后的逻辑
if (valids.every(item => item)) {
console.log(11)
}
}
}
解答为什么两个组件ref、model
绑定的都是form
- 通过对比我们可以发现
form1 form2
有共同的props methods
- 我们通过 mixin 提取一下
export default {
props: {
form: {
required: true,
type: Object,
default: () => {}
},
},
methods: {
validForm () {
let result = false
this.$refs.form.validate(valid => valid && (result = true))
return result
}
}
}
- 在
form1 form2
中引用该minix
,并在对应组件中删除相应的属性和方法即可
结尾
- 超大表单解决起来很麻烦,这里只是对组件的拆分
- 组件之间的联动也是一大难点,等下次整理完再发出来
- 欢迎大家在评论区讨论一下自己是怎么解决的,也欢迎大家对作者指出不足
补充
上边遇到的map
循环中使用async
await
中遇到问题我在其他文章中作了解释 JS循环中使用async、await的正确姿势