You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.3 KiB
49 lines
1.3 KiB
<template> |
|
<div class="menu-child"> |
|
<template v-for="item in this.menuList"> |
|
<el-submenu :popper-class="$route.path === '/home' || $route.path === '/sfel' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length"> |
|
<template slot="title"> |
|
<span slot="title" :id="item.id">{{item.columnName}}</span> |
|
</template> |
|
<menuTree :menuList="item.children"></menuTree> |
|
</el-submenu> |
|
<el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else> |
|
<span slot="title" :id="item.id">{{item.columnName}}</span> |
|
</el-menu-item> |
|
</template> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'menuTree', |
|
props: { |
|
menuList: { |
|
type: Array, |
|
default: [] |
|
} |
|
}, |
|
data () { |
|
return {} |
|
}, |
|
mounted () {}, |
|
methods: {} |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
|
|
@media (min-width: 280px) and (max-width: 750px) { |
|
.menu-child{ |
|
/deep/ .el-menu-item { |
|
height: 40px;line-height: 40px; |
|
} |
|
} |
|
.el-submenu{ |
|
/deep/ .el-submenu__title{ |
|
height: 40px; |
|
line-height: 40px; |
|
font-size: 1rem; |
|
} |
|
} |
|
} |
|
</style>
|
|
|