支持嵌套對象、多級數組的Vue動態多級表單組件 —— vue-dynamic-form-component

方便不想看徹底篇文章的童鞋，簡單總結一下，這是篇軟廣，主要是推廣本身在業務中沉澱的一個開源組件 vue-dynamic-form-component 。基於 element-ui 實現的 vue組件，只需編寫相似 async-validator 的規則，自動生成對應的表單，支持常見輸入類型的同時，支持嵌套對象、hashmap、多維數組等複雜類型。有須要的童鞋歡迎使用和貢獻代碼，順便給個star（我也不知道爲何字體自動加黑了，不關我事）

前言

幾個月前，我在github開源了一個前端解析手機應用安裝包（IPA 或 APK 文件）信息的工具 app-info-parser ，算是第一次正兒八經的作開源這件事，以後就有了半夜三四點回復issue、修bug的體驗，說實話，上完班還要處理issue是挺累的，但也是樂在其中。正所謂開源一時爽，一直開源一直爽。

對於程序員而言，最不喜歡的事情，除了和產品經理 吵架 （交流，是交流，不是吵架，要peace）外，估計就是一直作重複的事情了。在程序界，有至關一部分開源工具都是爲了把人從重複的事情中解放出來，去作更有趣、更能體現我的價值的事情。好比 AI智能回覆老婆消息 (請勿隨意嘗試，老婆沒了我不負責)。

以前開源的工具 app-info-parser 是減小重複工做，提升生產效率，接下來的主角 vue-dynamic-form-component 也是如此。

先貼一個展現大概功能的 gif ，動圖有點大，若是加載不出來的話能夠到 組件首頁 查看。

左邊是你須要編寫的主要代碼，右邊是對應生成的表單。

背景（Why）

爲何要作這個組件？其實在前言中已經提到：由於不想一直作重複、沒有技術含量的事情。

對於本篇文章而言，這件重複、沒有技術含量的事情就是：簡單的表單代碼

我所在的小組主要負責公司的公共服務系統搭建及維護，隨之而來的即是一套接一套的CURD系統，目前業界已經存在不少優秀的UI庫，好比爲 Vue 而生的 element-ui, iView，基於 react 的 ant-design 等，已經在很大程度上提升了PC管理系統的開發效率，減小了不少重複工做。

可是對於表單功能，UI庫出於通用性的考慮，實際使用中，對於簡單的數據對象，咱們仍然須要編寫大量的表單代碼來實現，由於出現了不少優秀的動態表單組件，好比 vue-form-generator，vue-form-making

那麼爲何我還要再造一個相似的輪子？這其實要結合組內的技術棧來講：

因爲組內的人員配置問題：前端1人（沒錯，就是孤獨的我）、後端8人+，在技術棧上，選用了後端同事相對容易上手的 Vue ，基於 element-ui 開發管理系統。而目前已有的動態表單組件存在如下不適用的問題：

• vue-form-generator：設計思想很好，可是組件樣式比較old school，同時對多級對象、多維數組等複雜數據支持不是很好，須要本身實現 field 組件，使用成本較高
• vue-form-making：也是基於element-ui, 樣式統一，可是基於組件類型生成表單的方式不夠靈活，只能利用已存在的輸入組件，所以不支持多級對象等複雜類型

其餘的組件存在的問題基本和上面差很少，就不一一列舉了。

以上就是爲何我會想要再造一個Vue的動態表單輪子，其實裏面就已經包含了接下來咱們要講的： vue-dynamic-form-component 有什麼做用？

功能（What）

動態生成表單

基於 async-validator 的規則來生成表單，只須要編寫簡單的聲明配置，便可自動生成表單，只須要關注數據類型，無需關注數據類型對應何種輸入組件

<template>
  <dynamic-form v-model="data" :descriptors="descriptors">
  </dynamic-form>
</template>
複製代碼

export default {
  data () {
    return {
      data: {},
      descriptors: {
       	date: { type: 'date', label: 'date \'s label', required: false },
        number: { type: 'number', label: 'number \'s label', required: true, placeholder: 'please input the number' },
        string: { type: 'string', label: 'string \'s label', required: true, pattern: /^test$/g },
        url: { type: 'url', label: 'url \'s label', required: true, placeholder: 'please input the url' },
        email: { type: 'email', label: 'email \'s label', required: false },
        enum: { type: 'enum', label: 'enum\'s label', enum: ['value-1', 'value-2'] }   
      } 
    }
  }
}
複製代碼

若是是直接使用 element-ui，除了長得多的html代碼，還須要編寫對應的 rule 以供表單驗證，對應的代碼量要多得多。

支持嵌套對象/Hashmap/多維數組

使用 element-ui 編寫表單時，爲了支持嵌套對象等複雜類型，咱們能夠在 el-form-item 中再添加一個 el-form 或者 el-form-item 。

可是，若是有更好的選擇，你真的願意一遍一遍的寫這樣的代碼嗎？

<!-- 省略data，rules等代碼 -->
<el-form label-width="120px" :model="data" :rules="rules">
  <el-form-item prop="user" label="用戶">
    <el-form :model="data.user">
      <el-form-item label="名字" prop="name">
        <el-input v-model="data.user.name" placeholder="只容許英文、數字"></el-input>
      </el-form-item>
    </el-form>
  </el-form-item>
</el-form>
複製代碼

要注意，以上僅僅只是一個輸入框（已省略data代碼，爲了美觀還須要額外的樣式代碼），就須要寫這麼多代碼，能忍？誰愛忍誰忍，我不忍了。看看若是是使用 vue-dynamic-form-component, 咱們須要作什麼

// 只展現 descriptors 代碼，其餘無需變動
{
  user: {
    type: 'object',
    fields: {
      name: { type: 'string', label: '名字', placeholder: '只容許英文、數字' }
    }
  }
}
複製代碼

而且， vue-dynamic-form-component 還對多級表單作了樣式優化，自動加深子表單的背景色（初始背景色、顏色偏移量可配置），方便區分：

同時，針對 hashmap / array 等複雜數據類型實現了對應的交互邏輯，提供添加、刪除等操做：

看完這個你肯定你還想再回去寫前面的代碼？（等我不幹程序員了我就去當推銷員-。-）

使用（How）

假如你心動了，那麼，心動不如行動（自我嘲諷：好老土的說法），趕忙用起來，把本身從繁瑣無聊的表單代碼中解放出來。

具體用法請查閱組件文檔：vue-dynamic-form.quincychen.cn/

別忘了先去 github 點個star哦（你覺得這裏就不加粗了嗎，不存在的兄dei）

最後

不要拘泥於業務開發，善於（或者說要熱衷於）尋找業務/生活中存在的待解決問題，而後幹掉它，這纔是真正體現你價值的地方。

共勉~