<template>
<div class="container" :class="{ shrink: sliderExpand }">
<j-header :flag="'home'" :isSum="true" :backLastBtn="false"></j-header>
<div class="main">
<J-slider @getMenuItem="getMenuItem"></J-slider>
<el-main>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, index) in levelList"
:key="index + '0'"
>
<span class="no-redirect">{{ item.title }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
<transition>
<router-view></router-view>
</transition>
</el-main>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import JHeader from '@/components/layout/JHeader'
import JSlider from '@/components/layout/JSlider'
export default {
name: 'settings',
computed: {
...mapState('app', ['sliderExpand', 'sidebar', 'menuList'])
},
components: {
JHeader,
JSlider,
},
data() {
return {
levelList: []
}
},
methods: {
...mapMutations('common', ['setMenu']),
// 点击菜单时获取的数据
getMenuItem(val) {
this.getlevelList(val.name)
},
// 获取面包屑数据
getlevelList(name) {
const filtered = this.filterThirdLevel(this.menuList, name)
let list = []
this.treeForeach(filtered, (node) => {
if (
!node.hasOwnProperty('level') ||
(node.level == 3 && node.name == name)
) {
list.push({ name: node.name, title: node.title })
}
})
this.levelList = list
},
// 根据路由中的name值选出对应的数据(包含其父级、父父级,还是以树的结构展示)
filterThirdLevel(data, targetValue) {
return data
.filter(function (item) {
return (
item.children &&
item.children.some(function (child) {
return (
child.children &&
child.children.some(function (grandchild) {
return grandchild.name === targetValue
})
)
})
)
})
.reduce(function (result, item) {
const matchingChildren = item.children
.filter(function (child) {
return (
child.children &&
child.children.some(function (grandchild) {
return grandchild.name === targetValue
})
)
})
.map(function (child) {
return {
name: child.name,
title: child.title,
children: child.children
}
})
if (matchingChildren.length) {
result.push({
name: item.name,
title: item.title,
children: matchingChildren
})
}
return result
}, [])
},
// 组装成符合面包屑循环的数据(将树结构中符合条件的数据及父级、父父级组成新的同级数组)
treeForeach(tree, func) {
let node,
list = [...tree]
while ((node = list.shift())) {
func(node)
node.children && list.push(...node.children)
}
}
},
mounted() {
var name = this.$route.path.replace('/', '')
this.getlevelList(name)
}
}
</script>
面包屑展示
最新推荐文章于 2024-09-10 09:55:59 发布