58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<div class="menu-title">主菜单</div>
|
|
<!-- 侧边栏菜单区域 -->
|
|
<el-menu active-text-color="#409Eff" background-color="#fff" text-color="#000" :router="true" unique-opened>
|
|
<!-- 一级菜单 -->
|
|
<el-sub-menu :index="item.id" v-for="item in menuList" :key="item.id">
|
|
<!-- 一级菜单模板区域 -->
|
|
<template #title>
|
|
<el-icon>
|
|
<component :is="item.iconValue"></component>
|
|
</el-icon>
|
|
<span>{{ item.labelName }}</span>
|
|
</template>
|
|
<!-- 二级菜单 -->
|
|
<el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
|
|
@click="clickMenu(subItem)">
|
|
<template #title>
|
|
<span>{{ subItem.labelName }}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import store from '@/store'
|
|
// import { mapState, mapMutations } from 'vuex';
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'side-menu',
|
|
data() {
|
|
return {
|
|
menuList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getMenuList()
|
|
},
|
|
methods: {
|
|
getMenuList() {
|
|
// this.menuList = this.$store.state.menuList
|
|
this.menuList = store.getters.getMenuList
|
|
},
|
|
// 点击菜单
|
|
clickMenu(value) {
|
|
//通过vuex将数据存储在store中
|
|
store.commit('mutationSelectTags', value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.menu-title {
|
|
margin-top: 5px;
|
|
}
|
|
</style> |