vue+element-ui简单制作后台管理系统以及element table组件的应用

一、前言

之前模仿微信使用了mint-ui，所以想学习一下同是饿了么公司的element-ui组件的使用，查了一下网上很多是用来做后台管理系统，刚好最开始接触网页制作的时候就是在课程里选择做一个老师提供界面整体截图及功能的管理系统。当时什么都不懂，草草的完成了，于是现在打算花几天时间重新做一次这个界面来练练手。

 

二、项目展示

 

三、功能介绍

项目是纯前端项目，没有连接数据库。页面只制作了系统渠道管理这一页。很多功能是组件自带效果的组合，但是为了实现自己想要的效果也是花了些时间。

1.侧边目录的收缩

2.右侧内容大小根据目录收缩及浏览器窗口大小变化的自适应

3.页面缩小到表格全部内容展示的最小尺寸时去掉两列采集时间，改为可将鼠标光标放置在网站名上查看

4.点击表格中编辑按钮能在表格中修改本行内容

 

四、主要实现思路及问题解决

1.主要布局两列宽度

一开始选择了element-ui的container布局，但是没有解决其宽度不能随目录收缩而改变的问题，于是直接自己设置两个div块来写样式。右侧主内容块中使用二级路由来挂载页面，使用相对定位，根据目录的收缩与否改变left及width。相关JS函数代码：

changeCollapse () {
        var mainCol = document.getElementsByClassName('main-col')[0];
        this.isCollapse = !this.isCollapse //isCollapse代表目录是否收缩
        if(this.isCollapse) {
          mainCol.style.left = '90px';
          mainCol.style.width='calc(100% - 110px)'//计算属性
        }
        else {
          mainCol.style.left = '220px';
          mainCol.style.width = 'calc(100% - 240px)'
        }
      }

2.表格变化

表格的功能结合了组件中多种类型的表格，结合的过程中遇到了许多坑，感觉mint-ui虽然组件较少，接口较少，但用着简洁明了，可能由于是电脑端页面组件的原因，element-ui在初使用的过程中真的用得头大。

具体的实现就不细讲了，也难以用较少的语言表达清楚，大概了解了table组件每种类型的实现和代码结构后结合起来应该没有太大问题，只是可能会有一些一小问题绊脚。或者可以在文章末我的github地址中下载项目源码，可能会有所帮助。

还要说的就是element-ui按钮绑定点击事件是用@click，而不像其他自定义标签一样加.native。还有一点坑了我很长时间！在vue实例生成之后添加新的属性到实例上，它不会触发视图更新，例如我们无法通过直接给isPopover变量赋值来改变v-if绑定状态下的两列采集时间是否显示，解决方法是使用$set方法赋值：

this.$set(this,'isPopover',true)

它在改变变量赋值的同时会更新视图。以上这一点在vue官方文档中也有说明，只怪自己没全面仔细的看完文档。

 

五、总结

本来以为两天就能做完了，没想到磕磕碰碰多花了些时间，不过总体还是有所收获。以下附项目地址。

github：https://github.com/GaoMinjian/backstage

在线演示：http://112.74.53.108/backstage