记一次使用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必须是数据中的唯一值。