前兩天封裝了一個基於vue和Element的table表格元件，閱讀的人還是很多的，看來大家都是很認同元件化、高複用這種開發模式的，畢竟開發效率高，程式碼優雅，逼格高嘛。雖然這兩天我的心情很糟糕，就像“懂王”懟記者：“你是一個糟糕的記者；CNN，Fake news”一樣的心情，但我還是忍著難受的心情來工作和分享，畢竟工作是飯碗，分享也能化解我糟糕透頂的心情。 今天，就來分享一下基於vue和Element所封裝的form表單元件，其中所用到的技術，在上一篇文章封裝Vue Element的table表格元件中已介紹的差不多了，今天再來多講一個vue的動態元件component。關於動態元件component的介紹，vue官方倒是很吝嗇，就只是給了一個例子來告訴我們如何使用而已。我們可以把它理解成一個佔位符，其具體展示什麼，是由`is`attribute來實現的，比如官網給的例子： ```html ``` 在上述示例中，currentTabComponent可以包括： * 已註冊元件的名字 * 或一個元件的選項物件 就醬，對它的介紹完了。 如果你還想了解更多，可以去vue官網檢視。 接下來就是封裝的具體實現，照例先來張效果圖：  1、封裝的form表單元件Form.vue： ```html ``` 在封裝時有一個Object.fromEntries的方法不相容ie，而我們公司又要求專案可以相容ie(我們公司的ie基本都是ie11)，所以只能自己封裝了一個fromEntries方法。 ```js export const fromEntries = arr => { if (Object.prototype.toString.call(arr) === '[object Map]') { console.log(1) let result = {}; for (const key of arr.keys()) { result[key] = arr.get(key); } return result; } if(Array.isArray(arr)){ let result = {} arr.map(([key,value]) => { result[key] = value }) return result } throw 'Uncaught TypeError: argument is not iterable'; } ``` 2、使用已封裝的表單元件： ```html ``` 本次封裝的form表單元件，基本考慮到了在日常開發中會經常使用到的表單元件，如果還有其他的需求，可自行新增。另外，本次封裝也對錶單的回顯(返顯)做了實現，比如我們在編輯資料時，需要將被修改的資料顯示在表單中，本次封裝就充分考慮到了這一點，只要你在傳給封裝的form元件的引數中加一個data引數，並將需要回顯的資料名稱一一對應並賦值就可以了，比如： ```js data: { name: '小壞', certificateId: '222', status: '0', love: ['0'] } ``` 如果你不需要回顯資料，比如新增的時候，那就不傳這個data就可以了。