比較全面的介紹表單控件片酝，功能比較完善，使用也比較靈活喜滨。重點(diǎn)是焚廊，開源冶匹。

技術(shù)棧

• vite2
• vue3
• element-plus
• vue-router (演示用)

nf-form 表單控件的功能

基于 el-form 封裝了一個(gè)表單控件，包括表單的子控件咆瘟。
既然要封裝嚼隘，那么就要完善一些，把能想到的功能都要實(shí)現(xiàn)出來(lái)袒餐，不想留遺憾嗓蘑。
畢竟UI庫(kù)提供的功能都很強(qiáng)大了，不能浪費(fèi)了對(duì)吧匿乃。

• 依賴 json 動(dòng)態(tài)創(chuàng)建表單
• 可以多行多列
• 可以調(diào)整布局
• 可以自定義子控件（插槽和動(dòng)態(tài)組件）
• 可以擴(kuò)展表單子控件
• 數(shù)據(jù)驗(yàn)證
• 數(shù)據(jù)聯(lián)動(dòng)
• 組件聯(lián)動(dòng)
• 依據(jù) json 自動(dòng)創(chuàng)建 model

功能演示

介紹代碼之前先看看效果桩皿。

• 單列表單
  這個(gè)比較基礎(chǔ)，直接貼圖幢炸。

單列表單

• 多列表單
  有時(shí)候需要雙列或者三列的表單泄隔，這個(gè)也是要支持的。

雙列表單

三列表單

因?yàn)椴捎玫氖?el-col 實(shí)現(xiàn)的多列宛徊，所以理論上最多支持 24 列佛嬉，當(dāng)然要看屏幕的寬度了逻澳。

• 調(diào)整布局
  看上面的圖片，可以發(fā)現(xiàn)個(gè)問(wèn)題暖呕，改變列數(shù)之后斜做，表單頁(yè)面變得不好看了，這時(shí)候需要我們做一些調(diào)整湾揽，比如讓某個(gè)組件占用兩份空間瓤逼，調(diào)整一下組件的先后順序。

【單列中的合并】

單列的合并組件位置

調(diào)整之后库物，頁(yè)面可以更緊湊霸旗。可以兩個(gè)組件占一行戚揭，也可以三個(gè)組件占一行诱告，具體看屏幕的寬度和一個(gè)組件的大小。

【多列里的占一行】

多列里面一個(gè)組件占用兩個(gè)位置

• 自定義子控件
  如果表單提供的子控件不能滿足需求民晒，那么怎么辦精居？我們可以自己來(lái)定義一個(gè)子控件。

1. 使用插槽
   使用插槽比較簡(jiǎn)單和靈活潜必，可以在表單控件外部完全控制箱蟆，適合臨時(shí)的情況，插槽里可以有多個(gè)組件刮便。

用插槽實(shí)現(xiàn)自定義組件

2. 使用動(dòng)態(tài)組件
   插槽的方式雖然靈活，但是不便于復(fù)用绽慈，如果需要在多個(gè)地方使用的話恨旱，可以先做成一個(gè)組件，然后用動(dòng)態(tài)組件的方式加入表單坝疼。

動(dòng)態(tài)組件實(shí)現(xiàn)自定義子控件

這里使用動(dòng)態(tài)組件的方式加入了 element 的穿梭控件搜贤，也可以加入其它各種組件。

• 數(shù)據(jù)驗(yàn)證
  可以直接使用 el-form 提供的驗(yàn)證功能钝凶，在json里面設(shè)置好驗(yàn)證規(guī)則即可仪芒。

表單驗(yàn)證

• 數(shù)據(jù)聯(lián)動(dòng)

1. 一個(gè)組件內(nèi)的聯(lián)動(dòng)
   這個(gè)可以使用 el-cascader 來(lái)實(shí)現(xiàn)。

2. 多個(gè)組件的聯(lián)動(dòng)
   可以用簡(jiǎn)單來(lái)實(shí)現(xiàn)耕陷。

• 組件聯(lián)動(dòng)
  可以根據(jù)某個(gè)組件的值掂名，設(shè)置其他組件是否顯示。

文本類

選擇類

封裝表單子控件

表單控件需要很多子控件哟沫，所以要先封裝一下子控件饺蔑，然后才方便封裝表單控件。

定義接口嗜诀，統(tǒng)一規(guī)范

表單子控件有一個(gè)相同的需求猾警，都需要實(shí)現(xiàn)屬性和 v-model 數(shù)據(jù)交換孔祸，因?yàn)?element 把 value 給封裝成了v-model，所以無(wú)法直接綁定組件的屬性发皿，必須建立一個(gè)內(nèi)部變量來(lái)綁定崔慧。
所以需要一個(gè)轉(zhuǎn)換的方式，這里采用自定義ref來(lái)實(shí)現(xiàn)穴墅，順便實(shí)現(xiàn)了一下防抖功能惶室。

雖然在表單控件里面并不需要防抖功能，但是查詢的時(shí)候需要封救，而表單子控件是可以通用到查詢控件里面的拇涤。

定義一個(gè) v-model 和 my-change

// 自定義 ref 
/**
 * 自定義的ref，實(shí)現(xiàn)屬性和內(nèi)部變量的數(shù)據(jù)轉(zhuǎn)換
 * @param { reactive } props 組件的屬性
 * @param { object } context 組件的上下文
 * @param { number } delay 延遲刷新的時(shí)間誉结，單位：毫秒鹅士，默認(rèn)：0
 * @param { string } name 要對(duì)應(yīng)的屬性名稱，默認(rèn)：modelValue
 * @returns 自定義的ref
 */
export const debounceRef = (props, context, delay = 0, name = 'modelValue') => {
  let _value = props[name]

  // 計(jì)時(shí)器
  let timeout
  // 是否輸入狀態(tài)惩坑。輸入時(shí)取 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() // 組件內(nèi)部刷新模板
        clearTimeout(timeout) // 清掉上一次的計(jì)時(shí)
        timeout = setTimeout(() => {
          // 修改 modelValue 屬性
          context.emit(`update:${name}`, newValue) // 提交給父組件
          // 用于區(qū)分是哪個(gè)組件觸發(fā)的事件。
          context.emit('my-change', newValue, props.controlId, props.colName)
          isInput = false
        }, delay)
      }
    }
  })
}

封裝各種表單子控件

按照原子性原則以舒，子控件封裝的比較細(xì)趾痘，直接看圖：

表單子控件

代碼有點(diǎn)多，不一一介紹了蔓钟，感興趣的可以看源碼永票。

封裝表單控件

基礎(chǔ)工作做好之后，我們就可以封裝 el-form 了滥沫。

定義屬性

依據(jù) el-form 的屬性我們定義幾個(gè)關(guān)鍵性屬性

介紹屬性
/**
 * 表單控件需要的屬性
 */
export const formProps = {
  modelValue: Object, // 完整的model
  partModel: Object, // 根據(jù)選項(xiàng)過(guò)濾后的model
  miniModel: Object, // 精簡(jiǎn)的model
  /*
  * 自定義子控件 key:value形式
  * * key: 編號(hào)侣集。1：插槽；100-200：保留編號(hào)
  * * value：string：標(biāo)簽兰绣；函數(shù)：異步組件世分，類似路由的設(shè)置
  */
  customerControl: { // 自定義的表單子組件
    type: Object,
    defaule: () => {}
  },
  colOrder: { // 表單字段的排序的依據(jù)
    type: Array,
    default: () => []
  },
  formColCount: { // 表單的列數(shù)
    type: Number,
    default: 1
  },
  reload: {
    type: Boolean, // 是否重新加載配置阿宅，需要來(lái)回取反
    default: false
  },
  itemMeta: {
    type: Object, // 表單子控件的屬性
    default: () => {}
  },
  ruleMeta: { // 驗(yàn)證信息
    type: Object, 
    default: () => {}
  },
  formColShow: { // 數(shù)據(jù)變化陨收，聯(lián)動(dòng)組件是否顯示
    type: Object,
    default: () => {}
  } 
}

定義內(nèi)部model

一般一個(gè) model 就可以，只是這里做了一個(gè)組件聯(lián)動(dòng)的百姓，那么如果只需要獲取可見的組件的值呢臀玄，于是做了局部model瓢阴。

model

實(shí)現(xiàn)多行多列和布局調(diào)整

采用 el-col 實(shí)現(xiàn)，通過(guò)控制 span 來(lái)實(shí)現(xiàn)多列健无，所以理論上最多支持24列炫掐，當(dāng)然這個(gè)要看屏幕寬度了。

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

  // 根據(jù)配置里面的colCount睬涧，設(shè)置 formColSpan
  const setFormColSpan = () => {
    const formColCount = props.formColCount // 列數(shù)
    const moreColSpan = 24 / formColCount // 一個(gè)格子占多少份

    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 除以 占的份數(shù)
            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) {
            // 多列痹束，占的格子數(shù) * 份數(shù)
            formColSpan[m.controlId] = moreColSpan * m.colCount
          }
        }
      }
    }
  }

  return {
    formColSpan,
    setFormColSpan
  }
}

首先計(jì)算一下一列要用多少個(gè)span检疫，也就是用24除以列數(shù)。
然后判斷是不是單列祷嘶，單列要處理多個(gè)組件占用一個(gè)位置的需求屎媳，多列要處理一個(gè)組件占用多個(gè)位置的需求。

實(shí)現(xiàn)擴(kuò)展

表單子控件可以多種多樣论巍，無(wú)法完全封裝進(jìn)入表單控件烛谊，那么就需要表單控件支持子控件的擴(kuò)展。
這里要感謝 vue 的動(dòng)態(tài)組件功能嘉汰，讓擴(kuò)展子控件變得非常方便丹禀。

我們使用 component 和動(dòng)態(tài)組件來(lái)實(shí)現(xiàn)表單子控件的加載。

<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')),
  // 數(shù)字
  'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
  'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
  // 日期鞋怀、時(shí)間
  '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')),
  // 選擇双泪、開關(guān)
  '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'))

}

/**
 * 動(dòng)態(tài)組件的字典，便于v-for循環(huán)里面設(shè)置控件
 */
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'], // 搜索
  // 數(shù)字
  120: formItemList['el-form-number'], // 數(shù)字
  121: formItemList['el-form-range'], // 滑塊
  // 日期密似、時(shí)間
  110: formItemList['el-form-date'], // 日期
  111: formItemList['el-form-datetime'], // 日期 + 時(shí)間
  112: formItemList['el-form-month'], // 年月
  113: formItemList['el-form-week'], // 年周
  114: formItemList['el-form-year'], // 年
  115: formItemList['el-form-time-picker'], // 任意時(shí)間
  116: formItemList['el-form-time-select'], // 選擇固定時(shí)間
  // 選擇焙矛、開關(guān)
  150: formItemList['el-form-checkbox'], // 勾選
  151: formItemList['el-form-switch'], // 開關(guān)
  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'] // 下拉聯(lián)動(dòng)
}

需要擴(kuò)展子控件的時(shí)候，我們只需要向字典（dict）里面添加需要的組件即可残腌，然后設(shè)置一個(gè)新的編號(hào)村斟。

  // 添加臨時(shí)動(dòng)態(tài)組件
  formProps.customerControl = {
    300: 'el-transfer'
  }
  // 設(shè)置表單字段
  childMeta.select.controlType = 300

為啥用編號(hào)？雖然編號(hào)不易讀抛猫，但是編號(hào)穩(wěn)定蟆盹，而且靈活。如果我們要基于ant design Vue 封裝控件的話邑滨，我可以直接用編號(hào)，但是如果用名稱的話钱反，那么要不要區(qū)分 el- 和 a- 呢掖看？

實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)

聯(lián)動(dòng)分為數(shù)據(jù)聯(lián)動(dòng)，和組件聯(lián)動(dòng)面哥，數(shù)據(jù)聯(lián)動(dòng)可以依賴UI庫(kù)的組件來(lái)實(shí)現(xiàn)哎壳，或者依賴Vue的數(shù)據(jù)的響應(yīng)性來(lái)實(shí)現(xiàn)。
比如常見的省市區(qū)縣聯(lián)動(dòng)尚卫，我們可以用 el-cascader归榕。
如果需要使用多個(gè)組件的話，我們可以監(jiān)聽組件的值的變化吱涉，然后獲取數(shù)據(jù)綁定下一個(gè)組件的options刹泄。

// 數(shù)據(jù)聯(lián)動(dòng)
  watch (() => model.provinces, (v1, v2) => {
    console.log('監(jiān)聽值的變化', v1)
    const arr = [
      {"value": 1 + v1, "label": "多選 選項(xiàng)一" + v1},
      {"value": 2 + v1, "label": "多選 選項(xiàng)二" + v1}
    ]
  
    childMeta.city.optionList.length = 0
    childMeta.city.optionList.push(...arr)
  })

Vue 就是數(shù)據(jù)驅(qū)動(dòng)的外里，所以聯(lián)動(dòng)的話也是直接監(jiān)聽value的改變即可，不用像以前那樣要設(shè)置change事件了特石。

實(shí)現(xiàn)組件聯(lián)動(dòng)

組件聯(lián)動(dòng)盅蝗，就是一個(gè)組件的值發(fā)生變化，影響其他組件的顯示狀態(tài)姆蘸。

企業(yè)用戶

個(gè)人用戶

比如在注冊(cè)的時(shí)候墩莫，需要選擇企業(yè)用戶還是個(gè)人用戶。
如果是企業(yè)用戶逞敷，需要添加企業(yè)名稱（以及相關(guān)信息）狂秦；
如果是個(gè)人注冊(cè)那么只需要填寫個(gè)人姓名即可。

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

對(duì)于這類的需求裂问，我們可以配置一下 formColShow 屬性。

    "formColShow": {
      "90": {  // 組件ID
        "1": [90, 101, 100, 102, 105],  // 組件值對(duì)應(yīng)的需要顯示的組件ID玖姑，下同
        "2": [90, 120, 121],
        "3": [90, 110, 114, 112, 113, 115, 116],
        "4": [90, 150, 151, 152, 153, 160, 162]
      }
    },

配置好之后就可以實(shí)現(xiàn)了愕秫，表單控件內(nèi)部代碼會(huì)做一個(gè) watch 監(jiān)聽：

  // 數(shù)據(jù)變化，聯(lián)動(dòng)組件的顯示
  if (typeof props.formColShow !== 'undefined') {
    for (const key in props.formColShow) {
      const ctl = props.formColShow[key]
      const colName = props.itemMeta[key].colName
      // 監(jiān)聽組件的值焰络，有變化就重新設(shè)置局部model
      watch(() => formModel[colName], (v1, v2) => {
        if (typeof ctl[v1] === 'undefined') {
          // 沒(méi)有設(shè)定戴甩，顯示默認(rèn)組件
          setFormColSort()
        } else {
          // 按照設(shè)定顯示組件
          setFormColSort(ctl[v1])
          // 設(shè)置部分的 model
          createPartModel(ctl[v1])
        }
      })
    }

json格式

整個(gè)表單是依據(jù) json 動(dòng)態(tài)渲染出來(lái)的，那么json格式是啥樣的呢闪彼？分為兩個(gè)部分甜孤，一個(gè)是表單控件自己需要的屬性，另一個(gè)是表單子控件需要的屬性畏腕，還有驗(yàn)證規(guī)則等缴川。

{
  "formTest": {
    "baseProps": { // 表單控件自己的屬性
      "formColCount": 1, // 列數(shù)
      "colOrder": [ // 需要顯示的組件的ID
        90,  101, 102,
        110, 111, 114, 112, 113, 115, 116,
        120, 121, 100, 
        150, 151, 152, 153,
        160, 162
      ]
    },
    "formColShow": { // 組件聯(lián)動(dòng)的信息
      "90": { // 觸發(fā)的組件
        "1": [90, 101, 100, 102, 105], // 組件值對(duì)應(yīng)的需要顯示的組件的ID
        "2": [90, 120, 121],
        "3": [90, 110, 114, 112, 113, 115, 116],
        "4": [90, 150, 151, 153, 152, 160, 162]
      }
    },
    "ruleMeta": { // 驗(yàn)證規(guī)則
      "101": [ // 表單子控件的ID，下面是驗(yàn)證規(guī)則
        { "trigger": "blur", "message": "請(qǐng)輸入活動(dòng)名稱", "required": true },
        { "trigger": "blur", "message": "長(zhǎng)度在 3 到 5 個(gè)字符", "min": 3, "max": 5 }
      ]
    },
    "itemMeta": { // 表單子控件的屬性
      "90": {  
        "controlId": 90,
        "colName": "kind",
        "label": "分類",
        "controlType": 153,
        "isClear": false,
        "defaultValue": "",
        "placeholder": "分類",
        "title": "編號(hào)",
        "optionList": [
          {"value": 1, "label": "文本類"},
          {"value": 2, "label": "數(shù)字類"},
          {"value": 3, "label": "日期類"},
          {"value": 4, "label": "選擇類"}
        ],
        "colCount": 1
      },
      "100": {  
        "controlId": 100,
        "colName": "area",
        "label": "多行文本",
        "controlType": 100,
        "isClear": false,
        "defaultValue": 1000,
        "placeholder": "多行文本",
        "title": "多行文本",
        "colCount": 1
      },
      ...
    }
  }
}

遍歷子控件

因?yàn)樽涌丶挤庋b好了描馅，所以只需要簡(jiǎn)單遍歷即可：

  <el-form
    :model="formModel"
    :rules="rules"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    label-suffix="："
    label-width="130px"
    size="mini"
  >
    <el-row>
      <!--不循環(huán)row把夸，直接循環(huán)col，放不下會(huì)自動(dòng)往下?lián)Q行铭污。-->
      <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">父組件沒(méi)有設(shè)置插槽</slot>-->
            <slot :name="getCtrMeta(ctrId).colName">父組件沒(méi)有設(shè)置插槽</slot>
          </template>
          <!--表單item組件恋日，采用動(dòng)態(tài)組件的方式-->
          <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>

其他部分可以看源碼。

源碼

https://gitee.com/naturefw/nf-vite2-element