記一次使用Vue Antd Admin開發后台項目遇到的問題以及解決方法

一. vue-antd-admin簡介

Vue Antd Admin是Ant Design Pro 的 Vue 實現版本, 是開箱即用的中后台前端/設計解決方案

 

官方網站: https://iczer.gitee.io/vue-antd-admin-docs/
官方文檔: https://iczer.gitee.io/vue-antd-admin-docs/start/use.html
其基於的ant design for vue: https://www.antdv.com/docs/vue/introduce-cn/

 

二. 登陸之后頁面白屏

在項目開發前期，由於沒有做權限驗證，在Login.vue中的afterLogin函數中直接將this.setPermissions(permissions)和this.setRoles(roles)注掉導致的。

解決辦法：

a) 將src/config/default/setting.config.js文件中的filterMenu改成false即可。

b)在Login.vue添加如下代碼

    afterLogin(res) {
      this.logging = false
      const loginRes = res.data
      if (loginRes.code >= 0) {
       this.setUser(loginRes.user)
       let  permissions = [{
          id: 'form',                                    //權限ID
          operation: ['add', 'delete', 'edit', 'close']  //權限下的操作權限
        }]
        let roles = [{
          id: 'test',                                   //角色ID
          operation: ['add', 'delete', 'edit', 'close']  //角色的操作權限
        }]
        this.setUser(user)
        this.setPermissions(permissions)
        this.setRoles(roles)
        setAuthorization({token: loginRes.data.token})
        this.$router.push('/publicStore')
        this.$message.success(loginRes.message, 3)
      } else {
        this.error = loginRes.message
      }
    },    

　　這里需要注意的是，permissions和roles的數據格式必須是數組或者直接寫一個簡單的字符串比如 permission = 'form' 我一開始看文檔 直接復制粘貼文檔的內容 登錄以后 一直報錯 路由不顯示 后來才發現 roles和permission實際上是數組。

三. antdvUI表格的使用

a) 父子表

在antdv中的是可以直接進行子表嵌套到父表中的，想使用父子表只需要直接在父表的a-table中再嵌套一個a-table即可，子表的數據只需要在子表的a-table上配置:data-source="record.innerdata"，將innerdata換成后端傳過來對應的字段即可。

      <a-table :columns="columns" :data-source="dataSource" class="components-table-demo-nested" :rowKey='record=>record.id' >
        <div slot="action" slot-scope="record">
          <a slot="operation" @click="showModal(record)">編輯</a>
          <a slot="operation" style="margin-left: 5px;" @click="subshowModal(record.id)">添加跟蹤域</a>
          <a-popconfirm
            title="你確定要刪除此項?"
            ok-text="是"
            cancel-text="否"
            @confirm="confirmdelete(record.id)"
            @cancel="cancel"
            slot="operation">
            <a style="margin-left: 5px;">刪除</a>
          </a-popconfirm>
        </div>
        <a-table
          slot="expandedRowRender"
          slot-scope="record"
          :columns="innerColumns"
          :data-source="record.track_url"
          :pagination="false"
          :showHeader="false"
        >
          <a-popconfirm
            slot-scope="record"
            title="你確定要刪除此項?"
            ok-text="是"
            cancel-text="否"
            @confirm="confirmdeletetaskurl(record.id)"
            @cancel="cancel"
            slot="operation">
            <a style="margin-left: 5px;">刪除</a>
          </a-popconfirm>
        </a-table>
      </a-table>

 

b) 表格rowKye

 在a-table上配置:rowKey='record=>record.id即可，id必須是數據中的唯一值。