引言在工作中我經常需要處理一些複雜、動態表單，但是隨著需求不斷迭代，我們也許會發現曾經兩三百行的.vue文件現在不知不覺到了兩千行，三千行，甚至更多... 這對於一個需要長期維護的項目，無疑是增加了很多難度。因此，為了減小文件大小，優化表單組織的結構，我在日常的開發中實踐出一種基於組件的表單拆分 ...

引言

在工作中我經常需要處理一些複雜、動態表單，但是隨著需求不斷迭代，我們也許會發現曾經兩三百行的.vue文件現在不知不覺到了兩千行，三千行，甚至更多...

這對於一個需要長期維護的項目，無疑是增加了很多難度。

因此，為了減小文件大小，優化表單組織的結構，我在日常的開發中實踐出一種基於組件的表單拆分方法，同時還能保證所有的表單項是處於同一個el-form中。

這對於一個一開始就沒有做好文件組織，組件化的項目，有以下幾個優點：

改動小！後續新增表單項基本不會改動以前的代碼
基於組件！在邏輯上對錶單項做出拆分，併在任何地方嵌入
易維護！化單個大組件為多個小組件，每個組件只專註於一部分表單。

表單拆分

接下來我們會通過完成一個實際表單的方式來介紹如何實踐這種表單組織方式。

以element-ui文檔中的這個表單為例，接下來嘗試用我們的方式來實現

首先假設我們當前有一個vue文件 ./form/myForm.vue

<template>
  <el-form ref="form" :model="form" label-width="140px">
  ...
  </el-form>
<template>
<script>
export default {
 name: 'myForm',
 data() {
  return {
   form: {}
  }
 }
}
</script>

如果我們直接按照element-ui的表單文檔來寫，那麼我們的myForm.vue文件可能就會變成這樣：

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區域">
    <el-select v-model="form.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="form.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即創建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

假設我們還需要為這個表單增加審批流程，例如文檔中的這個表單
在加入新的表單項後，可能目前看著還好，但是隨著表單項越來越多，這個文件會變得越來越大，越來越難以維護。所以我們嘗試將這個表單項拆分為單個組件，模擬我們維護一個超大表單的場景。

新增子表單項組件

我習慣在當前表單的目錄下，創建一個components目錄，然後在components目錄下創建一個audit目錄，併在audit目錄下創建一個index.vue文件，用於存放審批流程相關的組件。如果後續有一些只有audit/index.vue文件中才用到的組件，我也會放在audit目錄下。保持目錄結構清晰。

<template>
  <div class="audit-form-item">
    <el-form-item label="審批人" :prop="`${propPrefix}.user`">
      <el-input v-model="form.user" placeholder="審批人"></el-input>
    </el-form-item>
    <el-form-item label="活動區域" :prop="`${propPrefix}.region`">
      <el-select v-model="form.region" placeholder="活動區域">
        <el-option label="區域一" value="shanghai"></el-option>
        <el-option label="區域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
export const auditFormData = () => ({
  user: '',
  region: ''
})

export default {
 name: 'auditFormItem',
 props: {
  value: {
   type: Object,
   default: () => auditFormData()
  },
  propPrefix: {
   type: String,
   default: ''
  }
 },
 data() {
  return {
   form: this.value
  }
 },
 watch: {
  value(newVal) {
   this.form = newVal
  },
  form(newVal) {
   this.$emit('input', newVal)
  }
 }
}
</script>

因為element-ui在對錶單進行校驗時，實際上是對model上綁定的數據進行校驗，所以為了能夠對數據正確執行校驗，我們需要在auditFormItem組件中實現v-model指令。

auditFormItem組件的propPrefix屬性用於指定表單項的首碼，便於我們在嵌入到el-form中時，能夠正確綁定表單項的prop屬性。

auditFormData函數返回了當前表單項的預設數據。父組件通過執行該函數，可以對子表單執行正確的初始化。不僅如此，通過這種方式，我們將每個子表單項的數據和組件綁定在一起，避免了父組件data中出現大量表單項數據，導致難以維護的問題。每個子表單維護各自的數據，互不幹擾。

如何嵌入已有項目

接下來我們嘗試將auditFormItem組件嵌入到myForm.vue文件中

<template>
  <el-form ref="form" :model="form" label-width="140px">
    <!-- 其他表單項 -->
    <!-- ... -->
    <audit-form-item v-model="form.audit" propPrefix="audit"></audit-form-item>
  </el-form>
</template>
<script>
import auditFormItem, { auditFormData } from './components/audit/index.vue'
export default {
  components: {
    auditFormItem
  },
  data() {
    return {
      form: {
        audit: auditFormData()
      }
    }
  }
}
</script>

如何進行校驗

經過上面的操作，我們實現了將一個表單拆分為多個子表單項，那麼如何進行表單校驗呢？

我們知道在element-ui中，要對一個表單項進行校驗有兩種方式：

一種是在el-form上綁定rules屬性，它會通過prop進行索引，自動對綁定的表單項進行校驗。
另一種是在el-form-item上綁定rules屬性，這會對單條表單項進行校驗。

出於我們拆分表單項的場景，我們選擇第二種方式，在el-form-item上綁定rules屬性，然後在各個子組件中維護rules。如果有一些通用的校驗規則，我們也可以在audit/validate.js文件中進行維護，然後通過import的方式引入。

如何處理聯動校驗

在複雜表單中，我們可能需要對多個表單項進行聯動校驗，例如：實時校驗表單項的合法性，當form.region為shanghai時，form.user不能為空，當form.region為beijing時，form.user必須為空。

那麼如何處理這種聯動校驗呢？

我們可以在el-form所在的組件中，定義一個validate方法，通過element-ui提供的validateField方法，對特定進行校驗。

<audit-form-item v-model="form.audit" propPrefix="audit" @validate="validate"></audit-form-item>

methods: {
  validate(fields) {
    this.$refs.form.validateField(fields)
  }
}

然後在audit/index.vue文件中，我們可以通過$emit('validate', fields)方法，對當前表單項進行校驗。

如何處理跨組件的聯動校驗

在我們拆分表單為多個子組件後，還可能會出現不同子組件之間的聯動校驗，例如：當子組件1中的form.region為shanghai時，子組件2中的form.user不能為空。
對於這個問題，其實我目前還沒有想到很好的解決方案，當前是在el-form所在的組件中，定義額外的校驗規則，然後綁定到一個空白的el-form-item上。

<el-form-item label="" label-width="0" prop="_form_validate_"></el-form-item>

rules: {
  _form_validate_: {
    validator: (rule, value, callback) => {
      // 聯動校驗邏輯
    }
  }
}

也可以考慮用vuex來維護需要跨組件共用的數據。

const crossCmpConfig = {
  state: {
    region: '',
  },
  mutations: {
    UPDATE: (state, { key, val }) => {
      state[key] = val
    },
  },
}

export default crossCmpConfig

多層嵌套

基於上面的方式，很容易就能想到，我們甚至可以繼續在audit/index.vue文件中，繼續嵌入別的子組件，例如：audit/audit-info/index.vue, 然後通過相同的方式，繼續嵌入到audit/index.vue文件中。

結語

上面就是我日常開發中，處理複雜表單的一些經驗總結，希望對大家有所幫助。

我是如何使用 vue2+element-ui 處理複雜表單，避免單文件過大的問題

引言