| | |
| | | </el-space> |
| | | </el-row> |
| | | <el-scrollbar :height="menuHeight" v-if="!collapse"> |
| | | <template v-for="(item, i) in routes" :key="`${i}`"> |
| | | <el-sub-menu v-if="item.children" :index="`${i}`"> |
| | | <template #title> |
| | | <el-icon> |
| | | <component :is="item.icon"></component> |
| | | </el-icon> |
| | | <span>{{ item.name }}</span> |
| | | </template> |
| | | |
| | | <template v-for="(child, i2) in item.children" :key="`${i}-${i2}`"> |
| | | <el-menu-item-group v-if="child.group" :title="child.name"> |
| | | <el-menu-item |
| | | v-for="(child2, i3) in child.children" |
| | | :key="`${i}-${i2}-${i3}`" |
| | | :index="child2.path" |
| | | @click="navPage(item, child, child2)" |
| | | > |
| | | <el-icon v-if="child2.icon"> |
| | | <component :is="child2.icon"></component> |
| | | </el-icon> |
| | | <template #title>{{ child2.name }}</template> |
| | | </el-menu-item> |
| | | </el-menu-item-group> |
| | | <el-menu-item |
| | | v-else |
| | | :index="child.path" |
| | | @click="navPage(item, child)" |
| | | > |
| | | <el-icon v-if="child.icon"> |
| | | <component :is="child.icon"></component> |
| | | </el-icon> |
| | | <template #title>{{ child.name }}</template> |
| | | </el-menu-item> |
| | | </template> |
| | | </el-sub-menu> |
| | | |
| | | <el-menu-item v-else :index="item.path" @click="navPage(item)"> |
| | | <el-icon> |
| | | <component :is="item.icon"></component> |
| | | </el-icon> |
| | | <template #title>{{ item.name }}</template> |
| | | </el-menu-item> |
| | | </template> |
| | | <MenuItems :routes="routes" @navPage="navPage"> </MenuItems> |
| | | </el-scrollbar> |
| | | |
| | | <template v-else> |
| | | <template v-for="(item, i) in routes" :key="`${i}`"> |
| | | <el-sub-menu v-if="item.children" :index="`${i}`"> |
| | | <template #title> |
| | | <el-icon> |
| | | <component :is="item.icon"></component> |
| | | </el-icon> |
| | | <span>{{ item.name }}</span> |
| | | </template> |
| | | |
| | | <template v-for="(child, i2) in item.children" :key="`${i}-${i2}`"> |
| | | <el-menu-item-group v-if="child.group" :title="child.name"> |
| | | <el-menu-item |
| | | v-for="(child2, i3) in child.children" |
| | | :key="`${i}-${i2}-${i3}`" |
| | | :index="child2.path" |
| | | @click="navPage(item, child, child2)" |
| | | > |
| | | <el-icon v-if="child2.icon"> |
| | | <component :is="child2.icon"></component> |
| | | </el-icon> |
| | | <template #title>{{ child2.name }}</template> |
| | | </el-menu-item> |
| | | </el-menu-item-group> |
| | | <el-menu-item |
| | | v-else |
| | | :index="child.path" |
| | | @click="navPage(item, child)" |
| | | > |
| | | <el-icon v-if="child.icon"> |
| | | <component :is="child.icon"></component> |
| | | </el-icon> |
| | | <template #title>{{ child.name }}</template> |
| | | </el-menu-item> |
| | | </template> |
| | | </el-sub-menu> |
| | | |
| | | <el-menu-item v-else :index="item.path" @click="navPage(item)"> |
| | | <el-icon> |
| | | <component :is="item.icon"></component> |
| | | </el-icon> |
| | | <template #title>{{ item.name }}</template> |
| | | </el-menu-item> |
| | | </template> |
| | | <MenuItems :routes="routes" @navPage="navPage"> </MenuItems> |
| | | </template> |
| | | |
| | | <el-row ref="subTitleRef" class="sub-title" justify="center"> |
| | |
| | | emits: ['navPage'], |
| | | data() { |
| | | return { |
| | | isCollapsed: this.collapse, |
| | | menuHeight: '600px', |
| | | title: '生态环境线上监管', |
| | | subTitle: '©上海飞羽环保科技有限公司', |
| | |
| | | icon: 'Search', |
| | | name: '排污抽运', |
| | | }, |
| | | { |
| | | path: '/common/userMatch', |
| | | icon: 'Connection', |
| | | name: '账户匹配', |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | watch: {}, |
| | | computed: { |
| | | homePage() { |
| | | return this.routes[0].children |
| | |
| | | methods: { |
| | | handleOpen() {}, |
| | | handleClose() {}, |
| | | collapsedSider() { |
| | | this.isCollapsed = !this.isCollapsed; |
| | | this.$emit('collapsedSider', this.isCollapsed); |
| | | }, |
| | | navPage(...item) { |
| | | const titles = item.map((value) => { |
| | | return value.name; |