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

fkaflof6  于 4个月前  发布在  其他
关注(0)|答案(3)|浏览(40)

Bug report(问题描述)

Steps to reproduce(问题复现步骤)
Screenshot or Gif(截图或动态图)
Other relevant information(格外信息)
  • Your OS:
  • Node.js version:
  • vue-element-admin version:
noj0wjuj

noj0wjuj1#

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

bogh5gae

bogh5gae2#

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

rjee0c15

rjee0c153#


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

相关问题