Vue+Element-ui实现后台管理系统（5）---封装一个Form表单组件和Tabl。。。

封装⼀个Form表单组件和Table组件

有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这⾥只展⽰关键部分代码，项⽬代码放在github上：1、2、3、4、

这篇主要讲解实现图表的功能：整体效果

图⽚效果

⼀、封装⼀个Form表单组件

1、封装思路

我们需要看下⼀个基础form组件，需要哪些数据。我们看下官⽹⼀个⽰例

运⾏结果

从这个简单的⽰例,⾄少有两份数据是需要⽗组件传⼊到表单组件中的:

1、v-model对应的数据,这份数据是⽤户选择好后给⽗组件的，所以是双向绑定的。

2、label 对应的数据，这⾥是写死的，既然要封装成⼀个控件那么这份数据也需要⽗组件传过来。

注意 这⾥需要注意的⼀点就是标签的类型是input 还是select是需要外⾯传来过来的数据告知的。同时如果是select那么还需要把option下⾯的数据返回。2、封装Form组件

新建⼀个CommonForm.vue,作为封装Form的组件

这样⼀个简单的表单公共组件就完成了。

⼀、封装⼀个Table组件

1、封装思路

同样我们需要去看下element有关表格最简单的⽰例。代码⽰例

运⾏结果

从这个简单的⽰例,⾄少也是两份数据是需要⽗组件传⼊到表格组件中的：1、v-model对应的数据,这份数据是⽤户选择好后给⽗组件的。

2、label 对应的数据，这⾥是写死的，既然要封装成⼀个控件那么这份数据也需要外⾯传过来。

注意 这⾥除了上⾯这两份数据外,还有⼀份数据在实际开发中也是需要的,那就是分页信息,因为⼀般table数据都会⽐较多所以分页还是⾮常需要的。2、封装Table组件

新建⼀个CommonTable.vue,作为封装Table的组件

三、⽰例

这⾥展⽰⽤户管理组件(UserManage.vue),它使⽤了上⾯两个封装后的组件。

别⼈骂我胖，我会⽣⽓，因为我⼼⾥承认了我胖。别⼈说我矮，我就会觉得好笑，因为我⼼⾥知道我不可能矮。这就是我们为什么会对别⼈的攻击⽣⽓。攻我盾者，乃我内⼼之⽭(15)