# 封裝一個Form表單元件和Table元件 有關後臺管理系統之前寫過四遍部落格,看這篇之前最好先看下這四篇部落格。另外這裡只展示關鍵部分程式碼，專案程式碼放在github上： [mall-manage-system](https://github.com/yudiandemingzi/mall-manage-system) 1、[Vue + Element-ui實現後臺管理系統(1) --- 總述](https://www.cnblogs.com/qdhxhz/p/12577851.html) 2、[Vue + Element-ui實現後臺管理系統(2) --- 專案搭建 + ⾸⻚佈局實現](https://www.cnblogs.com/qdhxhz/p/12586292.html) 3、[Vue + Element-ui實現後臺管理系統(3) --- 麵包屑 + Tag標籤切換功能](https://www.cnblogs.com/qdhxhz/p/12590324.html) 4、[Vue + Element-ui實現後臺管理系統(4)---封裝一個ECharts元件的一點思路](https://www.cnblogs.com/qdhxhz/p/12600889.html) 這篇主要講解實現圖表的功能： `整體效果` **圖片效果** ## 一、封裝一個Form表單元件 #### 1、封裝思路 我們需要看下一個基礎form元件，需要哪些資料。我們看下官網一個示例 [Form 表單](https://element.eleme.cn/#/zh-CN/component/form) ```html ``` `執行結果` 從這個簡單的示例,至少有兩份資料是需要父元件傳入到表單元件中的: 1、v-model對應的資料,這份資料是使用者選擇好後給父元件的，所以是雙向繫結的。 2、label 對應的資料，這裡是寫死的，既然要封裝成一個控制元件那麼這份資料也需要父元件傳過來。 `注意` 這裡需要注意的一點就是標籤的型別是input 還是select是需要外面傳來過來的資料告知的。同時如果是select那麼還需要把option下面的資料返回。 #### 2、封裝Form元件 新建一個CommonForm.vue,作為封裝Form的元件 ```html ``` 這樣一個簡單的表單公共元件就完成了。
## 一、封裝一個Table元件 #### 1、封裝思路 同樣我們需要去看下element有關表格最簡單的示例。[Table 表格](https://element.eleme.cn/#/zh-CN/component/table) `程式碼示例` ```html ``` `執行結果` 從這個簡單的示例,至少也是兩份資料是需要父元件傳入到表格元件中的： 1、v-model對應的資料,這份資料是使用者選擇好後給父元件的。 2、label 對應的資料，這裡是寫死的，既然要封裝成一個控制元件那麼這份資料也需要外面傳過來。 `注意` 這裡除了上面這兩份資料外,還有一份資料在實際開發中也是需要的,那就是分頁資訊,因為一般table資料都會比較多所以分頁還是非常需要的。 #### 2、封裝Table元件 新建一個CommonTable.vue,作為封裝Table的元件 ```html ```
## 三、示例 這裡展示使用者管理元件(UserManage.vue),它使用了上面兩個封裝後的元件。 ```html ```

``` 別人罵我胖，我會生氣，因為我心裡承認了我胖。別人說我矮，我就會覺得好笑，因為我心裡知道我不可能矮。這就是我們為什麼會對別人的攻擊生氣。 攻我盾者，乃我內心之矛(15) ```