中后台系统中，复杂表单的开发优化技巧

在中后台系统的日常开发中，表单必不可少，当表单内容比较多，例如有上百个字段（这一点都不夸张，血淋淋的现实）时，代码往往也变得复杂且难以维护，加上各种动态联动的表单校验，无疑让我们的页面开发过程雪上加霜，本文将结合自己平时的开发习惯，分享一下在大表单开发中如何处理复杂的表单校验，以及如何对表单进行拆分，减少单个文件堆积过多的代码内容。

表单校验

<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="form"
    inline
  >
    <el-form-item label="企业性质" prop="natureEnterprise">
      <el-select v-model="form.natureEnterprise">
        <el-option
          label="国企"
          :value="1"
        />
        <el-option
          label="事业单位"
          :value="2"
        />
        <el-option
          label="个体户"
          :value="3"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="业务类型" prop="type">
      <el-select v-model="form.type">
        <el-option
          label="护肤"
          :value="1"
        />
        <el-option
          label="食品"
          :value="2"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="企业名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="社会统一信用代码" prop="creditCode">
      <el-input v-model="form.creditCode" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="注册地址" prop="address">
      <el-input v-model="form.address" placeholder="请输入"></el-input>
    </el-form-item>
  </el-form>
</