noj0wjuj1#
我也遇到了这个问题, 网上没找到解决方案, 尝试解决一下吧
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 routesif (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
rjee0c153#
补充一下修复后的截图证明, 之前是这种选中的情况下, 再次打开时·菜单 1-2-2·节点未渲染选中
3条答案
按热度按时间noj0wjuj1#
我也遇到了这个问题, 网上没找到解决方案, 尝试解决一下吧
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
rjee0c153#
补充一下修复后的截图证明, 之前是这种选中的情况下, 再次打开时·菜单 1-2-2·节点未渲染选中