最近在做基于 vue -element ui 的 admin 管理平台, 踩坑还是不少. 一些比较实用的, 还有一些坑, 希望记录下来, 如果有你们需要的, 恰好有解决办法, 那是荣幸之至呀,
使用的基础模板来自于 https://github.com/PanJiaChen/vueAdmin-template ) (在此感谢作者!)
利用 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 的时候才会执行
来源: https://www.thinksaas.cn/group/topic/839595/