ElementUi 搭建后台管理系统的常见几个实用功能

table表格

table表格遍历数据

子项是绑定一个prop属性进行全部遍历出来

但有时候需求不是这样的，我们的需求不是照着模板遍历出来，或者想使用v-model绑定数据时，就需要用到插槽的方式进行使用。

form表单同样适用

使用

scope.row.value 取到遍历数组的项
scope.$index 可以直接取到序号

button按钮+dialog对话框

button按钮+dialog对话框应用场景最多的就是后台管理系统的新增页面和编辑页面，由于后台管理系统的新增功能和编辑功能是有异曲同工之妙，所以我们一般不会分成2个页面去写，而是写在一个页面上。

我们来看下新增页面和编辑页面对比。

页面几乎一样，我们要做的其实只是对数据进行如何区分罢了。

那么，这怎么区分用户点击的是编辑按钮还是新增按钮呢？而与此同时，对话框的标题也随之对应呢？

因为我是父子组件的方式写的，所以需要传值，但不影响逻辑

子组件需要接收一个属性过来，用一个三元运算符就可区分出用户点击了新增按钮还是编辑按钮，点击新增按钮就是新增页面的对话框，反之亦然。

关键就是父组件如何进行对应的逻辑编写，其实就是一个if else语句可以搞定了，前提是子组件发送事件传递过来，父组件接收。

只需这样就知道用户点击了哪个按钮，用一个if语句判断，如果用户点击编辑按钮，那就编写编辑功能的代码。

tag标签，状态筛查的逻辑

状态筛查也是后台管理系统使用的比较多的功能

一般后端写接口，都是以0 1 2 3 4 来区分status, 0-4几个数字分别代表不同的状态，而前端这边发起请求，就是将label作为参数传递给后端

在data中定义数据

将用户的选中的状态发送给后台

根据状态码，在表格中展示不同风格的tag和信息

折叠导航栏

先来看效果图，这种需求也是后台管理系统场景常见。

这种操作是怎么实现的呢？

像上面这种需求，我们一般也是父子组件分离写的，不会在一个页面上写，为的就是组件分离，不让页面太繁杂，父子组件开发在vue中十分重要且频繁使用。

话不多说，进入正题，先看下页面结构拆分就知道为什么要父子组件啦。

所以说，做后台管理系统又是200%逃不开layout布局了，在这里建议，一定要学会这种layout布局

回到需求上面来。

从上面那张结构拆解图来看，侧边栏和头部区域还有主体区域都是属于子组件，因此，他们3个都是由一个父亲来控制。

---

逻辑代码实现部分,关键是弄懂这3个人之间的 :collapse="isCollapse"属性是怎么互相通讯的，弄懂了这个就明白了logo文字的变化，图标的切换等等。

父组件

侧边栏

头部