基於vue-element UI 後臺管理平臺 踩坑記錄( 一 )

最近在作基於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 的時候纔會執行
複製代碼