有效管理大表单的思路

问题点列举

  • 1:对于vue来说,单一表单处理起来很简单,但是一旦表单字段量加大,并且交互逻辑变复杂之后,就没有那么游刃有余了。不可能一大堆判断逻辑放在一个组件里,编辑性 和可读性,都会变得越来越差。
  • 2:表单变大之后,下拉框的初始化时机,变得值得考究,毕竟,表单大了,下拉框就多了。
  • 3:表单变大之后,如何有效管理 新增/编辑/部分编辑/提交表单 的状态和周期,非常重要,处理不好就会乱。

组件拆分的思路整理

对于复杂的大表单,拆分表单是必须要做的,但是如何拆分也需要仔细思考一番。

  • 1:功能拆分,划定轮廓

    可以按照不同的主功能进行拆分,划定出一个轮廓。正常情况下,也是按照功能去查找不同的组件的。比如租客信息模块,保证金模块 等。

  • 2:智能组件 && 木偶组件,细化领域

    智能组件和木偶组件,分界线没有那么明显,都看一个度。这里我认为,应该首先将典型的智能组件和木偶组件拆分出来。

    • 木偶组件比较简单,拆出来之后,注意赋值和取值的操作即可,没有内部逻辑,拆出来之后,用起来会非常方便
    • 智能组件,内部逻辑比较多,肯定是要拆出来的。不止如此,还可能涉及到对其他组件进行修改对交互。所以,还要考虑如何规范到vuex中。
  • 3:模版拆分,共享与解耦

    拆分出来的不同表单中,可能还会共享其中的某些表单。这些表单也可以单独提出来,不同模版中共享一下。

    但是,这种模版组件,必须要处理好解耦的问题,不要填写过多业务逻辑,保持独立性

表单下拉框的初始化

经过多次考虑和测试,我认为,应该优先将模块中下拉框的数据初数据拿到,再进行后续操作,会有更优的效果。

  • 1:首先提前拿到数据能让后续的逻辑更加清晰,不必再考虑列表数据的问题
  • 2:涉及到新增/编辑时对绑定数据处理的问题。新增的时候需要赋值一个默认值,编辑的时候需要赋值获取到的数据,如果前提是列表数据已经获取,逻辑会更加清晰。否则还需要在 不同列表数据获取到之后,判断当前的操作状态是新增还是编辑,然后在处理赋值操作。这会让这种判断变得满屏都是,非常不美丽。
/************************************************
 *            数据初始化   开始
 ************************************************/
/******
 * type:add 新增,edit 编辑
 * query 参数
 */
initData (params) {
  this.editType = params.type
  this.initListData().then(() => {
    switch (this.editType) {
      case 'add':
        this.initAddData()
        break
      case 'edit':
        this.initEditData(params.params)
        break
    }
  })
},
// 初始化异步获取的数据
initListData () {
  return new Promise(resolve => {
    this.confirmLoading = true
    Promise.all([contractUserList(), utilsFindByType({ type: 'industry' })]).then(datas => {
      this.confirmLoading = false
      resolve()
    }).catch(() => {
      this.confirmLoading = false
    })
  })
},
// 初始化新增时的默认数据
initAddData () {
  this.setFormDataHandler({
    overdueFine: '0'
  })
},
// 初始化编辑状态时的默认数据
initEditData (params) {
  this.setFormDataHandler({
    overdueFine: '1'
  })
}
/************************************************
 *            数据初始化   结束
 ************************************************/

生命周期和提交管理

经过多次尝试和思考,我认为,直接用mounted 生命周期来处理表单模块的初始化非常不合适,我更倾向于,在父组件主动调用模块的初始化方法,这样数据获取的稳定,而且思路更清晰。

我的思路是,每个组件都固定好数据初始化和提交的方法,initAddData/initEditData/submitHandler,不同组件都可以通过initAddData/initEditData来处理子组件的初始化,并可以通过submitHandler拿到 子组件的提交数据。如果提交错误,子组件内各自校验。父组件只需要处理拿到正常数据的逻辑。

随机浏览