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

azoux發表於2024-08-16
VueUI

引言

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

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

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

這對於一個一開始就沒有做好檔案組織，元件化的專案，有以下幾個優點：

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

表單拆分

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

以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檔案中。

結語

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

相關文章