Vue表单生成器设计实践

前言

在公司一直从事基于Vue框架后台应用的前端研发，而该类应用的页面有较多的通过表单交互来增删改查的操作，为了进行优雅的开发体验，也有感于项目当前的代码，遂封装一个更合适的表单生成器form-generator.vue。

稍有从业经验的人都晓得，这类生成器在基于iview，ant-design这样的组件库下实现不算复杂，因此这里主要是阐述表单生成器的设计思路。

当前项目的表单生成操作有以下问题：

1. 实现form生成功能的组件代码僵硬，是通过v-if指令根据type字段来判断要渲染哪个组件，相应的schema如下：

   filterList: {
        
       list: {
        
           mallName: {
        
               name: 'mallId',
               displayName: '商场',
               type: 'SELECTION',
               notNull: true,
               value: '',
               options: {
        
                   option: []
               }
           },
           billDate: {
        
               name: 'billDate',
               displayName: '账单期',
               type: 'MONTH',
               notNull: false,
               value: '',
               options: {
        
                   option: []
               }
           }
           // ......
       }
   }
   

如果有其他类型的组件要渲染，则要更改当前的form结构数据和生成器实现组件中的v-if相关代码。

2. 可以看到，当前的form结构数据，将form的schema和相应的值value写在同一个对象中，这样，在将form结构数据写在Vuex类似的状态库中时，造成form结构数据和实际使用的代码组件的上下文的不统一。

3. form结构的数据的构造较复杂，有很深的嵌套，代码的可读性不友好。

思路

Vue框架有内置组件component，链接如下。用法是：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。通过component内置组件和is特性，我们可以很优雅的实现不同类型组件的分发渲染。这样我们只需要通过一个特定的字段componentType指明当前要渲染的组件名，然后赋值给is。而不需要冗长的v-if相关代码。

其次，我们将表单生成器的schema和表单最终存放的值一起存放到model中。

那么，我们的表单生成器的结构就出来了。

{
   
    model: {
   
        mallId: '',
        billDate: ''
    },
    schema: {
   
        fields: [
          {
   
             name: 'mallId',
             displayName: '商场',
             componentType: 'Select',
             placeholder: '不限',
             required: true,
             trigger: 'change',
             propObj: {
   
               transfer: true,
               filterable: true,
               clearable: true
             },
             options: []
          },
          {
   
              name: 'billDate',
              displayName: '账单期',
              componentType: 'DatePicker',
              placeholder: '请选择时间',
              propObj: {
   
                  transfer: true,
                  type: 'month',
                  class: 'datePicker'
              }
          }
        ]
    }
}

在实际生产使用中，schema部分存放在Vuex状态库中，而model部分则存放在具体组件的data中。这样做的考虑在于：类似Select组件的枚举值是从服务端获取到的，在接口请求到数据中当即将其设置到Vuex状态库中，而具体页面中存放的model对象可能会用于页面组件其他部分代码的操作。当然，也可以将这个form数据结构一起存放到Vuex状态库中或者直接存放到具体组件的data中。

结构解读

整个对象存放两个属性：model和schema。

1. model对象用于存放最终和form交互到的值，form-generator.vue组件的model属性即传递该值，并且使用了sync修饰符进行了数据的双向绑定。

2. schema对象主要的属性是fields，该字段是一个数组，用来存放具体待渲染为form组件的数据结构。

   1. 属性clearVerifyMsg用来驱动表单进行全部组件DOM层次的重置。

   2. 属性colProp用于每个表单组件外层包裹的ICol组件的栅格宽度控制，默认值为{ lg: 8, md: 12 }，及其其他ICol组件相关属性。

   3. fields数组下的每一项的属性如下：

      1. name：其值对应model中的字段名，在渲染的时候将model中的值双向绑定到当前渲染的组件中。

      2. componentType：is属性来使用，用来确定当前要渲染的组件名

      3. displayName：表单当前组件的label，会赋值给包裹着组件的FormItem外层组件的label属性中。

      4. hide：使用v-if指令控制当前组件是否渲染

      5. placeholder：占位符

      6. required：用在FormItem组件中，控制当前组件是否需要验证

      7. propObj：使