vue-element-admin

vue-element-admin copied to clipboard

Bug report（问题描述）

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Your OS:
• Node.js version:
• vue-element-admin version:

我也遇到了这个问题, 网上没找到解决方案, 尝试解决一下吧

问题已解决, 根本原因是使用path路径作为树形控件的唯一ID, 而vue系统的路由菜单结构是拼接而来的. 解决方案: 树形控件绑定key修改为: node-key="id"; generateRoutes方法增加唯一id: const data = { id: route.id, path: path.resolve(basePath, route.path), title: route.meta && route.meta.title } 调整检查节点方法 generateCheckedKeys(routes) { let checkedKeys = [] routes.forEach(route => { checkedKeys.push(route.id) if (route.children) { const temp = this.generateCheckedKeys(route.children) if (temp.length > 0) { checkedKeys = [...checkedKeys, ...temp] } } }) return checkedKeys }, handleEdit方法调整 const checkedKeys = this.generateCheckedKeys(routes) this.$refs.tree.setCheckedKeys(checkedKeys)

最后generateTree方法 generateTree(routes, basePath = '/', checkedKeys) { const res = [] for (const route of routes) { // const routePath = path.resolve(basePath, route.path) const routeId = route.id // recursive child routes if (route.children) { route.children = this.generateTree(route.children, routeId, checkedKeys) } if (checkedKeys.includes(routeId) || (route.children && route.children.length >= 1)) { res.push(route) } } return res }, 如有不太清晰的点, 可直接看我的源文件: https://github.com/jiefangen/frontend-vue/blob/main/bamboo-admin-v1/src/views/system/role/index.vue

补充一下修复后的截图证明, 之前是这种选中的情况下, 再次打开时·菜单 1-2-2·节点未渲染选中