先介紹功能，而後演示功能，最後介紹思路和編碼方式。html

nf-form 表單控件的功能

基於 el-form 封裝了一個表單控件，包括表單的子控件。既然要封裝，那麼就要完善一些，把能想到的功能都要實現出來，不想留遺憾。畢竟UI庫提供的功能都很強大了，不能浪費了對吧。vue

依賴 json 動態建立表單
能夠多行多列
能夠調整佈局
能夠自定義子控件（插槽和動態組件）
能夠擴展表單子控件
數據驗證
數據聯動
組件聯動
依據 json 自動建立 model

功能演示

介紹代碼以前先看看效果。react

單列表單

這個比較基礎，直接貼圖。ios

多列表單

有時候須要雙列或者三列的表單，這個也是要支持的。git

由於採用的是 el-col 實現的多列，因此理論上最多支持 24 列，固然要看屏幕的寬度了。json

調整佈局

看上面的圖片，能夠發現個問題，改變列數以後，表單頁面變得很差看了，這時候須要咱們作一些調整，好比讓某個組件佔用兩份空間，調整一下組件的前後順序。markdown

【單列中的合併】異步

調整以後，頁面能夠更緊湊。能夠兩個組件佔一行，也能夠三個組件佔一行，具體看屏幕的寬度和一個組件的大小。函數

【多列裏的佔一行】oop

自定義子控件

若是表單提供的子控件不能知足需求，那麼怎麼辦？咱們能夠本身來定義一個子控件。

使用插槽

使用插槽比較簡單和靈活，能夠在表單控件外部徹底控制，適合臨時的狀況，插槽裏能夠有多個組件。

使用動態組件

插槽的方式雖然靈活，可是不便於複用，若是須要在多個地方使用的話，能夠先作成一個組件，而後用動態組件的方式加入表單。

這裏使用動態組件的方式加入了 element 的穿梭控件，也能夠加入其它各類組件。

數據驗證

能夠直接使用 el-form 提供的驗證功能，在json裏面設置好驗證規則便可。

數據聯動

一個組件內的聯動

這個可使用 el-cascader 來實現。

多個組件的聯動

能夠用簡單來實現。

組件聯動

能夠根據某個組件的值，設置其餘組件是否顯示。

封裝表單子控件

表單控件須要不少子控件，因此要先封裝一會兒控件，而後才方便封裝表單控件。

定義接口，統一規範

表單子控件有一個相同的需求，都須要實現屬性和 v-model 數據交換，由於 element 把 value 給封裝成了v-model，因此沒法直接綁定組件的屬性，必須創建一個內部變量來綁定。因此須要一個轉換的方式，這裏採用自定義ref來實現，順便實現了一下防抖功能。

雖然在表單控件裏面並不須要防抖功能，可是查詢的時候須要，而表單子控件是能夠通用到查詢控件裏面的。

定義一個 v-model 和 my-change

// 自定義 ref 
/** * 自定義的ref，實現屬性和內部變量的數據轉換 * @param { reactive } props 組件的屬性 * @param { object } context 組件的上下文 * @param { number } delay 延遲刷新的時間，單位：毫秒，默認：0 * @param { string } name 要對應的屬性名稱，默認：modelValue * @returns 自定義的ref */
export const debounceRef = (props, context, delay = 0, name = 'modelValue') => {
  let _value = props[name]

  // 計時器
  let timeout
  // 是否輸入狀態。輸入時取 value；輸入完畢取 modelValue 屬性
  let isInput = false
  return customRef((track, trigger) => {
    return {
      get () {
        track()
        if (isInput) {
          // console.log(isInput)
          return _value
        } else {
          // console.log(isInput)
          return props[name]
        }
      },
      set (newValue) {
        isInput = true
        _value = newValue // 綁定值
        trigger() // 組件內部刷新模板
        clearTimeout(timeout) // 清掉上一次的計時
        timeout = setTimeout(() => {
          // 修改 modelValue 屬性
          context.emit(`update:${name}`, newValue) // 提交給父組件
          // 用於區分是哪一個組件觸發的事件。
          context.emit('my-change', newValue, props.controlId, props.colName)
          isInput = false
        }, delay)
      }
    }
  })
}
複製代碼

封裝各類表單子控件

按照原子性原則，子控件封裝的比較細，直接看圖：

代碼有點多，不一一介紹了，感興趣的能夠看源碼。

封裝表單控件

基礎工做作好以後，咱們就能夠封裝 el-form 了。

定義屬性

依據 el-form 的屬性咱們定義幾個關鍵性屬性

介紹屬性
/** * 表單控件須要的屬性 */
export const formProps = {
  modelValue: Object, // 完整的model
  partModel: Object, // 根據選項過濾後的model
  miniModel: Object, // 精簡的model
  /* * 自定義子控件 key:value形式 * * key: 編號。1：插槽；100-200：保留編號 * * value：string：標籤；函數：異步組件，相似路由的設置 */
  customerControl: { // 自定義的表單子組件
    type: Object,
    defaule: () => {}
  },
  colOrder: { // 表單字段的排序的依據
    type: Array,
    default: () => []
  },
  formColCount: { // 表單的列數
    type: Number,
    default: 1
  },
  reload: {
    type: Boolean, // 是否從新加載配置，須要來回取反
    default: false
  },
  itemMeta: {
    type: Object, // 表單子控件的屬性
    default: () => {}
  },
  ruleMeta: { // 驗證信息
    type: Object, 
    default: () => {}
  },
  formColShow: { // 數據變化，聯動組件是否顯示
    type: Object,
    default: () => {}
  } 
}
複製代碼

定義內部model

通常一個 model 就能夠，只是這裏作了一個組件聯動的，那麼若是隻須要獲取可見的組件的值呢，因而作了局部model。

實現多行多列和佈局調整

採用 el-col 實現，經過控制 span 來實現多列，因此理論上最多支持24列，固然這個要看屏幕寬度了。

/** * 處理一個字段佔用幾個td的需求 * @param { object } props 表單組件的屬性 * @returns  */
const getColSpan = (props) => {
  // 肯定一個組件佔用幾個格子
  const formColSpan = reactive({})
  
  // 表單子控件的屬性
  const formItemProps = props.itemMeta

  // 根據配置裏面的colCount，設置 formColSpan
  const setFormColSpan = () => {
    const formColCount = props.formColCount // 列數
    const moreColSpan = 24 / formColCount // 一個格子佔多少份

    if (formColCount === 1) {
    // 一列的狀況
      for (const key in formItemProps) {
        const m = formItemProps[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount >= 1) {
            // 單列，多佔的也只有24格
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount < 0) {
            // 擠一擠的狀況， 24 除以 佔的份數
            formColSpan[m.controlId] = moreColSpan / (0 - m.colCount)
          }
        }
      }
    } else {
      // 多列的狀況
      for (const key in formItemProps) {
        const m = formItemProps[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount < 0 || m.colCount === 1) {
            // 多列，擠一擠的佔一份
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount > 1) {
            // 多列，佔的格子數 * 份數
            formColSpan[m.controlId] = moreColSpan * m.colCount
          }
        }
      }
    }
  }

  return {
    formColSpan,
    setFormColSpan
  }
}
複製代碼

首先計算一下一列要用多少個span，也就是用24除以列數。而後判斷是否是單列，單列要處理多個組件佔用一個位置的需求，多列要處理一個組件佔用多個位置的需求。

實現擴展

表單子控件能夠多種多樣，沒法徹底封裝進入表單控件，那麼就須要表單控件支持子控件的擴展。這裏要感謝 vue 的動態組件功能，讓擴展子控件變得很是方便。

咱們使用 component 和動態組件來實現表單子控件的加載。

<component :is="formItemListKey[getCtrMeta(ctrId).controlType]" v-model="formModel[getCtrMeta(ctrId).colName]" v-bind="getCtrMeta(ctrId)" @my-change="myChange">
  </component>
複製代碼

export const formItemList = {
  // 文本類 defineComponent
  'el-form-text': defineAsyncComponent(() => import('./t-text.vue')),
  'el-form-area': defineAsyncComponent(() => import('./t-area.vue')),
  'el-form-url': defineAsyncComponent(() => import('./t-url.vue')),
  'el-form-password': defineAsyncComponent(() => import('./t-password.vue')),
  // 數字
  'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
  'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
  // 日期、時間
  'el-form-date': defineAsyncComponent(() => import('./d-date.vue')),
  'el-form-datetime': defineAsyncComponent(() => import('./d-datetime.vue')),
  'el-form-year': defineAsyncComponent(() => import('./d-year.vue')),
  'el-form-month': defineAsyncComponent(() => import('./d-month.vue')),
  'el-form-week': defineAsyncComponent(() => import('./d-week.vue')),
  'el-form-time-select': defineAsyncComponent(() => import('./d-time-select.vue')),
  'el-form-time-picker': defineAsyncComponent(() => import('./d-time-picker.vue')),
  // 選擇、開關
  'el-form-checkbox': defineAsyncComponent(() => import('./s-checkbox.vue')),
  'el-form-switch': defineAsyncComponent(() => import('./s-switch.vue')),
  'el-form-checkboxs': defineAsyncComponent(() => import('./s-checkboxs.vue')),
  'el-form-radios': defineAsyncComponent(() => import('./s-radios.vue')),
  'el-form-select': defineAsyncComponent(() => import('./s-select.vue')),
  'el-form-selwrite': defineAsyncComponent(() => import('./s-selwrite.vue')),
  'el-form-select-cascader': defineAsyncComponent(() => import('./s-select-cascader.vue'))

}

/** * 動態組件的字典，便於v-for循環裏面設置控件 */
export const formItemListKey = {
  // 文本類
  100: formItemList['el-form-area'], // 多行文本
  101: formItemList['el-form-text'], // 單行文本
  102: formItemList['el-form-password'], // 密碼
  103: formItemList['el-form-text'], // 電話
  104: formItemList['el-form-text'], // 郵件
  105: formItemList['el-form-url'], // url
  106: formItemList['el-form-text'], // 搜索
  // 數字
  120: formItemList['el-form-number'], // 數字
  121: formItemList['el-form-range'], // 滑塊
  // 日期、時間
  110: formItemList['el-form-date'], // 日期
  111: formItemList['el-form-datetime'], // 日期 + 時間
  112: formItemList['el-form-month'], // 年月
  113: formItemList['el-form-week'], // 年周
  114: formItemList['el-form-year'], // 年
  115: formItemList['el-form-time-picker'], // 任意時間
  116: formItemList['el-form-time-select'], // 選擇固定時間
  // 選擇、開關
  150: formItemList['el-form-checkbox'], // 勾選
  151: formItemList['el-form-switch'], // 開關
  152: formItemList['el-form-checkboxs'], // 多選組
  153: formItemList['el-form-radios'], // 單選組
  160: formItemList['el-form-select'], // 下拉
  161: formItemList['el-form-selwrite'], // 下拉多選
  162: formItemList['el-form-select-cascader'] // 下拉聯動
}
複製代碼

須要擴展子控件的時候，咱們只須要向字典（dict）裏面添加須要的組件便可，而後設置一個新的編號。

// 添加臨時動態組件
  formProps.customerControl = {
    300: 'el-transfer'
  }
  // 設置表單字段
  childMeta.select.controlType = 300
複製代碼

爲啥用編號？雖然編號不易讀，可是編號穩定，並且靈活。若是咱們要基於ant design Vue 封裝控件的話，我能夠直接用編號，可是若是用名稱的話，那麼要不要區分 el- 和 a- 呢？

實現數據聯動

聯動分爲數據聯動，和組件聯動，數據聯動能夠依賴UI庫的組件來實現，或者依賴Vue的數據的響應性來實現。好比常見的省市區縣聯動，咱們能夠用 el-cascader。若是須要使用多個組件的話，咱們能夠監聽組件的值的變化，而後獲取數據綁定下一個組件的options。

// 數據聯動
  watch (() => model.provinces, (v1, v2) => {
    console.log('監聽值的變化', v1)
    const arr = [
      {"value": 1 + v1, "label": "多選 選項一" + v1},
      {"value": 2 + v1, "label": "多選 選項二" + v1}
    ]
  
    childMeta.city.optionList.length = 0
    childMeta.city.optionList.push(...arr)
  })
複製代碼

Vue 就是數據驅動的，因此聯動的話也是直接監聽value的改變便可，不用像之前那樣要設置change事件了。

實現組件聯動

組件聯動，就是一個組件的值發生變化，影響其餘組件的顯示狀態。

好比在註冊的時候，須要選擇企業用戶仍是我的用戶。若是是企業用戶，須要添加企業名稱（以及相關信息）；若是是我的註冊那麼只須要填寫我的姓名便可。

這樣表單裏面顯示的組件就要隨之變化。

對於這類的需求，咱們能夠配置一下 formColShow 屬性。

"formColShow": {
      "90": {  // 組件ID
        "1": [90, 101, 100, 102, 105],  // 組件值對應的須要顯示的組件ID，下同
        "2": [90, 120, 121],
        "3": [90, 110, 114, 112, 113, 115, 116],
        "4": [90, 150, 151, 152, 153, 160, 162]
      }
    },
複製代碼

配置好以後就能夠實現了，表單控件內部代碼會作一個 watch 監聽：

// 數據變化，聯動組件的顯示
  if (typeof props.formColShow !== 'undefined') {
    for (const key in props.formColShow) {
      const ctl = props.formColShow[key]
      const colName = props.itemMeta[key].colName
      // 監聽組件的值，有變化就從新設置局部model
      watch(() => formModel[colName], (v1, v2) => {
        if (typeof ctl[v1] === 'undefined') {
          // 沒有設定，顯示默認組件
          setFormColSort()
        } else {
          // 按照設定顯示組件
          setFormColSort(ctl[v1])
          // 設置部分的 model
          createPartModel(ctl[v1])
        }
      })
    }
複製代碼

json格式

整個表單是依據 json 動態渲染出來的，那麼json格式是啥樣的呢？分爲兩個部分，一個是表單控件本身須要的屬性，另外一個是表單子控件須要的屬性，還有驗證規則等。

{
  "formTest": {
    "baseProps": { // 表單控件本身的屬性
      "formColCount": 1, // 列數
      "colOrder": [ // 須要顯示的組件的ID
        90,  101, 102,
        110, 111, 114, 112, 113, 115, 116,
        120, 121, 100, 
        150, 151, 152, 153,
        160, 162
      ]
    },
    "formColShow": { // 組件聯動的信息
      "90": { // 觸發的組件
        "1": [90, 101, 100, 102, 105], // 組件值對應的須要顯示的組件的ID
        "2": [90, 120, 121],
        "3": [90, 110, 114, 112, 113, 115, 116],
        "4": [90, 150, 151, 153, 152, 160, 162]
      }
    },
    "ruleMeta": { // 驗證規則
      "101": [ // 表單子控件的ID，下面是驗證規則
        { "trigger": "blur", "message": "請輸入活動名稱", "required": true },
        { "trigger": "blur", "message": "長度在 3 到 5 個字符", "min": 3, "max": 5 }
      ]
    },
    "itemMeta": { // 表單子控件的屬性
      "90": {  
        "controlId": 90,
        "colName": "kind",
        "label": "分類",
        "controlType": 153,
        "isClear": false,
        "defaultValue": "",
        "placeholder": "分類",
        "title": "編號",
        "optionList": [
          {"value": 1, "label": "文本類"},
          {"value": 2, "label": "數字類"},
          {"value": 3, "label": "日期類"},
          {"value": 4, "label": "選擇類"}
        ],
        "colCount": 1
      },
      "100": {  
        "controlId": 100,
        "colName": "area",
        "label": "多行文本",
        "controlType": 100,
        "isClear": false,
        "defaultValue": 1000,
        "placeholder": "多行文本",
        "title": "多行文本",
        "colCount": 1
      },
      ...
    }
  }
}
複製代碼

遍歷子控件

由於子控件都封裝好了，因此只須要簡單遍歷便可：

<el-form
    :model="formModel"
    :rules="rules"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    label-suffix="："
    label-width="130px"
    size="mini"
  >
    <el-row> <!--不循環row，直接循環col，放不下會自動往下換行。--> <el-col v-for="(ctrId, index) in formColSort" :key="'form_'+index" :span="formColSpan[ctrId]" ><!--:prop="getCtrMeta(ctrId).colName"--> <el-form-item :label="getCtrMeta(ctrId).label" :prop="getCtrMeta(ctrId).colName" > <!--判斷要不要加載插槽--> <template v-if="getCtrMeta(ctrId).controlType === 1"> <!--<slot :name="ctrId">父組件沒有設置插槽</slot>--> <slot :name="getCtrMeta(ctrId).colName">父組件沒有設置插槽</slot> </template> <!--表單item組件，採用動態組件的方式--> <template v-else> <component :is="dictControl[getCtrMeta(ctrId).controlType]" v-model="formModel[getCtrMeta(ctrId).colName]" v-bind="getCtrMeta(ctrId)" @my-change="myChange"> </component> </template> </el-form-item> </el-col> </el-row>
  </el-form>
複製代碼

篇幅有限沒法一一介紹，其餘部分能夠看源碼。

源碼

gitee.com/naturefw/nf…

基於 el-form 封裝一個依賴 json 動態渲染的表單控件