shujuju/ruoyi-ui/src/layout/components/Sidebar/index.vue

<template>
    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
        <logo v-if="showLogo" :collapse="isCollapse" />
        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
            <el-menu
                :default-active="activeMenu"
                :default-openeds ='[activeMenuT]'
				        ref="menu"
                :collapse="isCollapse"
                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg"
                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"
                :unique-opened="true"
                :active-text-color="settings.theme"
                :collapse-transition="false"
                mode="vertical"

            >
                <sidebar-item
                    v-for="(route, index) in handleSide"
                    :key="route.path  + index"
                    :item="route"
                    :base-path="route.path"
                />
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";

export default {
	// data() {
	//   return {
	//     indexs: 1,
	//     srtw: [0],
	//     showde:true
	//   }
	// },
    components: {
      SidebarItem, Logo,
       },
    mounted() {
      console.log(this.sidebarRouters,this.sidebar,this.settings)
    },
    computed: {

        ...mapState(["settings"]),
        ...mapGetters(["sidebarRouters", "sidebar","tabIndex"]),
        activeMenu() {
            // const route = this.$route;
            // const { meta, path } = route;
            // // if set path, the sidebar will highlight the path you set
            // if (meta.activeMenu) {
            //     return meta.activeMenu;
            // }

          // console.log(this.tabIndex)

            return this.tabIndex;
        },
        activeMenuT(){
          let tabshow = {}
          console.log(this.tabIndex,234)
         return this.tabIndex
        },
        handleSide() {
          let add = []
          for(let item of this.sidebarRouters){
            if(this.activeMenu.includes(item.path||item.redirect)){
              add.push(item)
            }
          }
          console.log(add)
          return add
        },
        showLogo() {
            return this.$store.state.settings.sidebarLogo;
        },
        variables() {
            return variables;
        },
        isCollapse() {
            return !this.sidebar.opened;
        },
        iejgu(){
          return [0]
        }

    }
};
</script>