vue3使用antd的小坑

table 表格

• 在我们使用antd的table组件中，由于是直接使用的复制ui中的代码，它有的代码不是响应式的，所以导致我们在table组件中添加其他的组件点击修改数据的时候，不能及时的响应，将数据改为响应式的就可以
• 如在table中使用Switch组件，不能及时更新，将table数据改为响应式的就可以了

menu菜单

• 当我们使用三级菜单导航的时候，点击tabs，只能打开二级菜单并且是关闭的状态，三级菜单不展示
• 注意事项，首先openkeys是一级菜单，二级菜单的key，selectedkeys是当前选中的key

• 最关键的一个是a-sub-menu这个二级菜单的标签要有 key，否则是不生效的，这个key就是一级菜单key，加上之后就可以了

  
  image.png

<a-sub-menu :title="sndmenu.meta.name" :key="sndmenu.meta.key">这里的key就是账户余额的key加上就可以了
    <a-menu-item v-for="trdmenu in sndmenu.children" :key="trdmenu.meta.key" @click="menuClick(sndmenu, trdmenu, menu)">
    <router-link :to="trdmenu.path">{{ trdmenu.meta.name }}</router-link>
    </a-menu-item>
</a-sub-menu>

backTop 返回顶部的组件

• 如果你没有使用overflow：auto 那么直接使用组件即可，默认监听是window
• 如果你使用了，并且使用layout组件进行页面布局了，backtop组件有个属性target，这个是一个函数，需要绑定监听的元素，我这里使用最简单的方式进行绑定的

<a-layout id="scrollTop">///当前标签添加id，使用js进行获取
     <a-back-top :target="targetFun" />
<a-layout>

//js
const targetFun = () => {
    return document.getElementById('scrollTop');这样就可以啦
};

权限路由及刷新导致路由丢失的问题

• 首先我是在登录之后，调取权限路由的接口（接口要同步的），进行路由的添加，注意v3中的addRoute是添加单个的对象并支持嵌套的（整个一个大的对象嵌套children），也可以进行循环添加，添加之后，在进行页面的跳转，此时要将处理好的路由 保存到本地（用持久化），在仓库中用一个变量flg默认false（不需要存储），在登录时，权限接口处理完数据，将flg为true
• 在路由拦截的钩子中添加判断flg为false并且有token时，在重新调用权限接口进行添加路由，因为每次刷新仓库没有存储的数据也会变为默认值，此时就知道是用户刷新页面了
• 还有就是重定向的问题，登录的时候单独重定向为首页，在用户刷新的路由钩子中重新定向为当前要跳转的页面就可以了
• 以上是最low的方法，后续会改进的，你要是有更好的方法，希望可以相互交流下