haoxuan
2024-04-19 4c71426795d126d0491f2e4105090273909e6d51
src/components/layout/components/appsidebar/index.vue
@@ -16,7 +16,8 @@
        text-color="#bfcbd9"
        active-text-color="#fff"
      >
        <el-submenu v-for="item in menus" :key="item.id" :index="item.id">
        <el-submenu  v-for="item in menus" :key="item.id" :index="item.id.toString()">
          <template slot="title">
            <i class="el-icon-s-grid icon"></i>
            <span>{{ item.title }}</span>
@@ -24,40 +25,25 @@
          <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)
@@ -73,4 +59,11 @@
<!-- 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>