| | |
|---|
| | | <el-menu-item v-for="itm in item.children" :key="itm.id" :index="itm.path">{{ itm.title }}</el-menu-item> |
|---|
| | | </el-submenu> |
|---|
| | | </el-menu> |
|---|
| | | <el-empty v-if="this.menus===null||this.menus===undefined||this.menus.length===0" :image-size="130" description="没有侧栏菜单"></el-empty> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getMenuTreeByRole } from "@/api/menus/index" |
|---|
| | | import { mapMutations } from "vuex" |
|---|
| | | export default { |
|---|
| | | name: "AppSidebar", |
|---|
| | | props: {}, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | menus: [] |
|---|
| | | menus: this.$store.state.menus |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| | | created() { |
|---|
| | | this.initNavMenu() |
|---|
| | | this.getMenuTreeByRole() |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // ...mapState(['menus']), |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | ...mapMutations(["setMenus"]), |
|---|
| | | getMenuTreeByRole() { |
|---|
| | | getMenuTreeByRole().then((res) => { |
|---|
| | | res.data.list.map((item) => { |
|---|
| | | if (item.systemType === 3) { |
|---|
| | | this.menus = item.menus |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 监听路由 |
|---|
| | | initNavMenu() { |
|---|
| | | // console.log(this.$route.name) |
|---|
| | |
|---|
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "./index.scss"; |
|---|
| | | ::v-deep .el-empty{ |
|---|
| | | .el-empty__description{ |
|---|
| | | p{ |
|---|
| | | color: #dddd; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
