Commit 343eecbc authored by tyn's avatar tyn

bug fix ,菜单默认打开二级目录

parent a8e212cd
...@@ -158,7 +158,7 @@ export default { ...@@ -158,7 +158,7 @@ export default {
menuDetails:{}, menuDetails:{},
menuOptions: { menuOptions: {
nodeName: "menuName", nodeName: "menuName",
nodeValue: "menuName", nodeValue: "menuId",
children : "childrenList" children : "childrenList"
}, },
detailsId:'', detailsId:'',
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
</template> </template>
<!-- 子集递归 --> <!-- 子集递归 -->
<project-menu-item v-for="(child,index) of menuItem.children" :menuItem="child" :key="child.nodeValue"></project-menu-item> <project-menu-item v-for="(child,index) of menuItem.children" :menuItem="child" :key="`${child.nodeValue}-${child.level}`"></project-menu-item>
</el-submenu> </el-submenu>
</template> </template>
<!-- 无子集菜单 --> <!-- 无子集菜单 -->
......
<template> <template>
<div class="project-side-menu-container"> <div class="project-side-menu-container">
<el-menu mode="vertical" class="project-side-menu-instance" :unique-opened="uniqueOpened" :default-active="createMenuIndex(comDefaultActive)" <el-menu mode="vertical" class="project-side-menu-instance" :unique-opened="uniqueOpened" :default-active="createMenuIndex(comDefaultActive)"
@select="menuSelect" @open="subMenuOpen" @close="subMenuClose" ref="customElMenu"> :default-openeds="comDefaultOpeneds" @select="menuSelect" @open="subMenuOpen" @close="subMenuClose" ref="customElMenu">
<template v-for="(item,index) of tempMenuTree"> <template v-for="(item,index) of tempMenuTree">
<project-menu-item :menuItem="item" :key="item.nodeValue"> <project-menu-item :menuItem="item" :key="`${item.nodeValue}-${item.level}`">
<template :slot="`${item.nodeName}-${item.level}`" slot-scope="scope"> <template :slot="`${item.nodeName}-${item.level}`" slot-scope="scope">
<slot :name="`${scope.data.nodeName}-${scope.data.level}`" :data="scope.data"></slot> <slot :name="`${scope.data.nodeName}-${scope.data.level}`" :data="scope.data"></slot>
</template> </template>
...@@ -46,6 +46,11 @@ export default { ...@@ -46,6 +46,11 @@ export default {
defaultActive: { defaultActive: {
type: [String, Number], type: [String, Number],
default: "" default: ""
},
// 默认展开的二级菜单
defaultOpeneds: {
type: Array,
default: () => []
} }
}, },
watch: { watch: {
...@@ -61,6 +66,11 @@ export default { ...@@ -61,6 +66,11 @@ export default {
handler(newValue) { handler(newValue) {
this.comDefaultActive = newValue; this.comDefaultActive = newValue;
} }
},
defaultOpeneds: {
handler(newValue) {
this.comDefaultOpeneds = newValue ? newValue : [];
}
} }
}, },
data() { data() {
...@@ -75,12 +85,13 @@ export default { ...@@ -75,12 +85,13 @@ export default {
tempMenuOptions: {}, tempMenuOptions: {},
tempMenuTree: [], tempMenuTree: [],
comMenuTree: this.menuTree, comMenuTree: this.menuTree,
comDefaultActive: this.defaultActive comDefaultActive: this.defaultActive,
comDefaultOpeneds: this.defaultOpeneds
}; };
}, },
//可访问data属性 //可访问data属性
created() { created() {
this.openTargetAllSubMenu(this.comDefaultOpeneds);
}, },
//计算集 //计算集
computed: { computed: {
...@@ -91,8 +102,33 @@ export default { ...@@ -91,8 +102,33 @@ export default {
//方法集 //方法集
methods: { methods: {
// 展开所有指定层级的菜单 默认二级 // 展开所有指定层级的菜单 默认二级
openTargetAllSubMenu() { openTargetAllSubMenu(openeds = [], level = 2) {
// 组件外传入了值 使用传入值,否则默认获取二级菜单打开二级
if (openeds instanceof Array && openeds.length) {
// 转换为字符串
this.comDefaultOpeneds = openeds.map(item => this.createMenuIndex(item));
} else {
// 递归查找当前二级目录index
const _tempTree = this.tempMenuTree;
const result = this.findTargetLevelIndex(_tempTree, 2, []);
this.comDefaultOpeneds = result;
}
},
findTargetLevelIndex(data = [], level = 2, result = []) {
if (data.length) {
for (const item of data) {
// level大于传入level直接跳出循环
if (item.level > level) break;
// 确保打开菜单为目录
if (item.level <= level && item.children instanceof Array) {
result.push(item.nodeValue);
}
if (item.children instanceof Array && item.children.length) {
this.findTargetLevelIndex(item.children, level, result);
}
}
}
return result.map(item => this.createMenuIndex(item));
}, },
// 事件订阅 // 事件订阅
subMenuOpen(menuPath, menuPathArray) { subMenuOpen(menuPath, menuPathArray) {
...@@ -130,7 +166,7 @@ export default { ...@@ -130,7 +166,7 @@ export default {
return null; return null;
}, },
// 初始化树形结构 // 初始化树形结构
initMenuTree(array = []) { async initMenuTree(array = []) {
if (array?.length) { if (array?.length) {
// 合并默认配置 // 合并默认配置
const _options = this.mergeMenuOptions(JSON.parse(JSON.stringify(this.menuOptions))); const _options = this.mergeMenuOptions(JSON.parse(JSON.stringify(this.menuOptions)));
...@@ -139,6 +175,8 @@ export default { ...@@ -139,6 +175,8 @@ export default {
const resultData = this.mapDataByMenuOptions(JSON.parse(JSON.stringify(this.comMenuTree)), _options); const resultData = this.mapDataByMenuOptions(JSON.parse(JSON.stringify(this.comMenuTree)), _options);
if (resultData) { if (resultData) {
this.tempMenuTree = resultData; this.tempMenuTree = resultData;
await this.$nextTick();
this.openTargetAllSubMenu(this.comDefaultOpeneds);
} }
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment