最近在做基于vue -element ui 的 admin 管理平台，踩坑还是不少。一些比较实用的，还有一些坑， 希望记录下来， 如果有你们需要的，恰好有解决办法， 那是荣幸之至呀，
使用的基础模板来自于 github.com/PanJiaChen/… ) (在此感谢作者！)
利用vue-router 与 element UI 的 NavMenu 动态渲染 sideBar
一级route属性 如:
var routersSingle = {
path: '/' + routers[i].url,
component: Layout,
name: routers[i].url,
meta: { title: routers[i].name, icon: 'tree', id: routers[i].id },
children: [],
alwaysShow: true
};
二级route属性 如：
var routersSingleChildren = {
component: () => import(`@/views/${state.addRouters[i].name}/${routers[j].url}`),
path: routers[j].url,
name: routers[j].url,
meta: { title: routers[j].name }
}
定义之后，我们用一个简单的方式去组装路由形成我们需要的路由列表，由于路由是后端给予的，所以除了最公共的路由，所有都是要重新生成的
/* 存储可以访问的模块 */
state.modules = routers
state.addRouters = []
/* 如果用户有访问的路由才进行路由组合 */
if (routers.length) {
/* 渲染父模块 */
for (let i = 0; i < routers.length; i++) {
/* 用layout包裹,找出pid为0的父级模块来渲染 */
if (routers[i].pid === 0) {
var routersSingle = {
path: '/' + routers[i].url,
component: Layout,
name: routers[i].url,
meta: { title: routers[i].name, icon: 'tree', id: routers[i].id },
children: [],
alwaysShow: true
};
state.addRouters.push(routersSingle)
}
}
/* 渲染子模块 */
for (let i = 0; i < state.addRouters.length; i++) {
for (let j = 0; j < routers.length; j++) {
/* 如果id 与 父模块的pid 相同 放入其children */
if (state.addRouters[i].meta.id === routers[j].pid) {
var routersSingleChildren = {
component: () => import(`@/views/${state.addRouters[i].name}/${routers[j].url}`),
/* 此处的坑，一定要用let循环，或者IIFE 不然你得到的永远是 i = router.length */
path: routers[j].url,
name: routers[j].url,
meta: { title: routers[j].name }
}
}
}
}
} else {
console.log('用户没有路由')
}
state.addRouters /* 后端回来的路由组装完毕~~~ */
这个时候我们需要一个JS，单独去管理路由的跳转，此套模板已经配置和介绍，那么按照介绍去撸即可(在这个js里 permission.js)。
路由跳转的钩子 router.beforeEach(to, from, next)
这是啥: 在路由切换时，此函数会触发
参数：
to: 即将进入路由的 route 信息
from: 离开路由的 route 信息
next: 继续执行的函数,没有 next() 的此钩子 会彻底 阻止你 进入下一个路由
有啥用: 如果你需要在访问不同路由时候去获取 离开页面 或 者即将进入页面 的动态数据，那么这个地方是个好地方。
例子:
import router from './router';
import NProgress from 'nprogress'; /* Progress 进度条 */
import 'nprogress/nprogress.css'; /* Progress 进度条样式 */
import { getToken } from '@/utils/auth'; /* 权限检查 */ (自己设定的，根据各自情况定义)
router.beforeEach((to, from, next) => {
/* 来做点事情 */
/* 根据用户的token是否存在做判断 */
if(getToken()) {
/* 如果token存在的话,也就是用户保持登陆状态的话,那跳登陆页面的都给我跳主页 */
if(to.path === 'login') {
next({path: '/'})
} else {
/* 如果不是的话，那就做你需要做的事情啦，例如 获取每一个页面的权限城市 */
...do something
next()
}
}
})
Element Table 坑系列
1.
如果你有这样的需求, 一个页面有几个状态,对应的table的column有增加或减少,一定给每一个column加上key.
不然你就会发现,每次切换状态的时候column的位置变化了，或者在网速略慢的情况下,甚至table会崩溃.
当然 一定要记得 element table 的这个方法, doLayout()
doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
使用方法: <el-table ref="yourTable"><el-table> <script> this.$refs.yourTable.doLayout() <script>
2.
如果你需要让页面不出现滚轮, 并且在PC上要兼容到 1366*768 我使用的办法是:
<el-table max-height="tableHeight"><el-table>
<script>data() { return{ tableHeight: document.body.clientHeight - 某一个固定值(例如 200) } }<script>
这样不管是1366 还是 1920 分辨率打开这个页面 ，都可以保证 不会出现滚动条
(如果有更好的办法请告诉我，不胜感激！！！)
3.
table在 Loading 和 border 的情况下. 数据重新渲染下,table的border left 和 top 会消失一下，然后在table加载完成之后 显示. 那么就造成table 抖动一下.
处理方法:
/* element 2.2.1 在有border, v-loading 情况下,会把border left 和 top 干掉 */
.el-table--border.el-loading-parent--relative {
border-left: solid 1px #ebeef5;
border-top: solid 1px #ebeef5
}
但是在safari的情况下 处理之后...貌似有一定的偏移.. 官方貌似也是因为这个原因 把 left 和 top 设置为了None
如果不兼容 safari 的话 这个是比较不错的解决方法
Element TimePicker 修改之路
如果你们的需求是选择一个 字符串时间，且 希望是先选时间，再选分钟这样的形式的话,
我这边有根据 Element Cascader选择器 制作的一个 小组件~ 给出来的值，是字符串 例如 :'14 : 00' 如此。
有一些业务要求,例如 开始时间 选择之后 ， 结束时间 不能选择 开始时间之前的任何时间, 结束时间也限制开始时间的选择。
回显的时候也只需要是字符串即可.
点击sideBar 更新当前路由
更新的含义：
重新加载此组件，生命周期都会走一次.
之前采用的方法是先在sideBar里,带上一个随机参数query，例如 new Date() 然后每一个页面里Watch路由的变化，并执行请求数据的函数.
为了简单，所以我们暂时采用以下方法，如果有更好的方法，也希望能告诉我呀...........
<router-view v-if="aliveRouter" ><router-view>
添加一个状态值 aliveRouter
什么时候去改变aliveRouter呢
如果左侧sideBar 没有触发 router.beforeEach(to, from, next) 的时候， 证明没有跳转路由。
这个时候就：
this.aliveRouter = false;
this.$nextTick(() => {
this.aliveRouuter = true;
)
这样这个路由也就重新加载了。
那如果是触发路由了 那么久不执行这个代码, 这个时候控制的方法有很多种 ，我是自己设置了一个flag。 如果进入了beforeEach 会改变flag = false 那么 上面的代码 只会在 flag = true 的时候才会执行
