复杂表单问题

Question

我有一个复杂的表单如下图，里面要做一些逻辑校验应该怎么去实现比较好呢，
我想到的是有2个方案：
方案1：整个页面用el-form包裹，这样的话怎么是实现每一个组件里面表单的校验呢
方案2：每个组件用一个el-form包裹，然后通过在父组件通过用ref的方式访问子组件的表单校验方法，子组件通过defineExpose返回对应的校验方法，然后数据也通过defineExpose返回，父组件合并数据

我们这个项目中目前没有用到复杂的表单，如果可以的话，建议老师也加一下

Answer 1

Sunday 2021-12-09 21:30:06

你好
首先对于这种功能必然要通过一个form表单包裹，这会让表单校验更加可控。
那么问题就是如何实现不同组件的表单校验。
实现表单校验的核心点主要有两个：
1是表单数据怎么存放
2是表单检验规则怎么存放
如果你这里使用了el 的话，那么 表单数据与检验规则必须要同时在 父子组件中都要被访问，来回传递未免过于复杂，所以可以把这两个数据都放入到vuex中。
那么一旦放入到vuex中，所涉及到的点就是数据变更时的复杂操作，这个只需要插接v model 即可，复杂度相对可控。

• 提问者 Jace_qiang #1

  如果存在vuex中，那ABC组件复用就不方便吧

• Sunday 回复 提问者 Jace_qiang #2

  如果在项目内进行组件复用为什么会不方便呢？ store 是游离在组件树之外的

• 提问者 Jace_qiang 回复 Sunday #3

  明白了，我刚才以为是整个from的数据放在vuex中，是单组件的数据放在vuex中