ant design vue pro的使用

发表于   |   分类于

最近在用ant-design-vue-pro，记录下遇到的问题及解决方案

1、如何修改默认的语言？

除了修改官网介绍到的src/locales/index.js，

还需要修改src/core/bootstrap.js的

1
store.dispatch('setLang', storage.get(APP_LANGUAGE, 'zh-CN'))

2、如何支持多页签模式？

ant design vue pro 支持多页签模式
修改 src/layouts/BasicLayout.vue 文件，添加multitab

添加属性

3、如何实现返回原来的页签不刷新？

在src/config/router.confit.js中引入src/layouts/RouteView.vue，并且注释掉const定义的RouteView。
路由通过meta中的keepAlive属性来定义是否刷新。
修改src/layouts/RouteView.vue中的返回值

修改返回值

4、如何隐藏面包屑导航？

路由对应的页面不要使用<page-header-wrapper>包裹内容

5、后端返回的数据结构与默认的不一致如何修改？

修改src/utils/request.js文件

6、如何动态渲染菜单？

修改src/store/index.js中的permission的来源

7、Antd is not defined 解决办法

作者配置了按需导入，所以vue组件完整导入配置的时候一直出现这个报错。Antd is not defined 解决办法。评论区的网友给出了一个简单的解决方法：
在main.js中这样引入

1
2
3
4
5
import Vue from 'vue'
 
import Antd from 'ant-design-vue/es'
 
Vue.use(Antd)

8、ant design vue pro指令权限是如何生效的？

官方文档用户登录后，调用获取用户信息的接口，用户信息的role属性中有个permissions属性，它的值是数组。数组中的每一个元素是一个权限对象，如下图表示，在dashboard这个权限下，有新增(add)、查询(query)、详情(get)、修改(update)、删除(delete)这五个权限按钮，当前用户拥有delete删除权限。