权限模块添加角色树形菜单选中状态无法正确保存,代码role.vue中的generateArr方法有bug

[xufeng888]

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:

[jiefangen]

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

[jiefangen]

问题已解决, 根本原因是使用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

[jiefangen]

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