如何将ElementUI表单校验分散管理改写为统一的长尾词？

本文共计1400个文字，预计阅读时间需要6分钟。

背景：在项目中使用到的前端框架是Vue.js和ElementUI。原因：因为业务场景中有许多大数据表格，但ElementUI的表格组件在分页和校验方面的实现并不友好。初期：为了方便，常采用ElementUI的表格组件。

背景

公司项目中所用到的前端框架是Vue.js + ElementUI，因为项目的业务场景中有很多的大表单，但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便，常常把多个表单写在一个.vue组件中，这导致单文件的代码量巨大，逻辑十分复杂。目前为了维护方便，表单的拆分就变得十分重要。

现在做了以下的Demo说明我们的业务场景，父组件是App.vue，该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件（在实际的业务场景中，可能多达10+表单）。按钮在父组件App.vue中，当点击按钮后，应该分别校验各个子组件，如果每个子组件都校验成功后再进行提交。

Demo

PersonForm.vue文件

下面的代码是PersonForm.vue组件，该表单包括姓名、年龄、性别。我们使用了PersonForm这个类去实例化组件中的personForm的值。在PersonForm中有个static方法getRule去获取校验方法去获取校验对象，该校验对象是ElementUI要求的写法，会在<el-form>的rules中定义。