vue+elementui實現索引標籤功能

<template>
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
        <el-button class="buttonimg">
            <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
            <!-- :src="collapsed?imgshow:imgsq" @click="doToggle()" -->
        </el-button>
        <el-submenu index="2" class="submenu">
            <template slot="title">當前使用者【{{username}}】身份認證:{{usertype}}</template>
            <el-menu-item index="2-1">設定</el-menu-item>
            <el-menu-item index="2-2" @click="mya()">個人中心</el-menu-item>
            <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
        </el-submenu>
    </el-menu>
</template>
 
<script>
    export default {
        name: 'LeftAside',
        data: function() {
            return {
                collapsed: false, //是否摺疊
                imgshow: require('../assets/img/show.png'),
                imgsq: require('../assets/img/sq.png'),
                username:sessionStorage.getItem("username"),
                usertype:sessionStorage.getItem("deptment")
            };
        },
        methods: {
            doToggle() {
                this.collapsed = !this.collapsed;
                console.log("TopNav的collapsed=%s", this.collapsed);
                this.$emit('top-click', this.collapsed);
            },
            exit() {
                this.$confirm('親，請不要走，留下好不好？', '提示', {
                    confirmButtonText: '殘忍離開',
                    cancelButtonText: '留下~',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/');
 
                }).catch(() => {});
            },
      mya(){
        /* this.$router.push('/userCenter'); */
         /* this.$router.push('/system/UserCenter'); */
      }
        }
    }
</script>
 
<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        border: none;
    }
 
    .submenu {
        float: right;
    }
 
    .buttonimg {
        height: 60px;
        background-color: transparent;
        border: none;
    }
 
    .showimg {
        width: 26px;
        height: 26px;
        position: absolute;
        top: 17px;
        left: 17px;
    }
 
    .showimg:active {
        border: none;
    }
</style>

<template>
  <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
    active-text-color="#ffd04b" :collapse="leftCollapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <!--
         第一級選單
         el-submenu屬性：
         index：用於選單摺疊，不能重複
         key:選單項的唯一標識，不可重複
         -->
    <el-menu-item index="/Home" key="Home">
      <i class="el-icon-house"></i>
      <span slot="title">首頁</span>
    </el-menu-item>
    <!-- <el-menu-item index="/Page1" key="Page1">
            <i class="el-icon-menu"></i>
            <span slot="title">Page1</span>
        </el-menu-item>
        <el-menu-item index="/Page2" key="Page2">
            <i class="el-icon-menu"></i>
            <span slot="title">Page2</span>
        </el-menu-item> -->
    <el-submenu v-for="root in treenode" :index="'index-'+root.dictId" :key="'key-'+root.dictId">
      <template slot="title">
        <i :class="root.dictIcon"></i>
        <span slot="title">{{root.dictText}}</span>
      </template>
      <!-- 第二級選單 -->
      <!--
            el-menu-item屬性：
            index：用於跳轉頁面，不能重複
            key:選單項的唯一標識，不可重複
             -->
 
      <el-menu-item @click="addTab(node.dictUrl,node.dictText)" v-for="node in root.children" :index="node.dictUrl"
        :key="'key-'+node.dictId">
        <i class="el-icon-menu"></i>
        <span slot="title">{{node.dictText}}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    name: 'LeftAside',
    props: ['leftCollapsed'],
    data: function() {
      return {
        treenode: ''
      };
    },
    methods: {
      addTab: function(url, text) {
        console.log(url, text);
        //呼叫vuex中的addTab方法，將點選的選單對應的元件資訊新增到已開啟的openTabs中
        this.$store.commit('addTab', {
          title: text, //Tab頁籤標題
          name: url //元件的路由
        });
        //設定當前Tab面板為選中狀態
        this.$store.commit('setTabActive', url);
      }
    },
    created() {
      //獲取請求路徑
      /* let url = this.axios.urls.SYSTEM_TREENODE; */
      let url = this.axios.urls.SYSTEM_QUERY;
      /*  ,{username:sessionStorage.getItem("username")} */
      console.log(url);
      //傳送axios請求
      this.axios.post(url, {
        username: sessionStorage.getItem("username")
      }).then(resp => {
        console.log(resp.data);
        this.treenode = resp.data.data;
      }).catch(resp => {});
      //設定首頁預設顯示
      // this.$router.push('/Home');
    }
  }
</script>

<template style="background-color:floralwhite">
    <el-container class="main-container">
        <el-aside :class="openCollapse">
            <LeftAside :open-collapsed="collapsed"></LeftAside>
        </el-aside>
        //索引標籤控制元件
        <el-container>
            <el-header class="main-header">
                <TopNav @click-collapse="topClick"></TopNav>
            </el-header>
            <el-main class="main-center">
                <el-tabs class="tabs-panel-fit" v-model="activeTab" type="border-card" closable @tab-remove="removeTab">
                    <el-tab-pane v-for="item in openTabs" :key="item.name" :label="item.title" :name="item.name">
                        <component :is="item.content"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
 
       //時鐘效果
      <div id="app" style="margin-left: 200px;margin-top: -400px;font-size: 30px;">
          {{date}}
      </div>
        </el-container>
    </el-container>
</template>
 
<script>
    import TopNav from '@/components/TopNav'
    import LeftAside from '@/components/LeftAside'
    export default {
        name: 'Main',
        data: function() {
            return {
                collapsed: false,
        date: new Date()
            };
        },
        methods: {
            topClick: function(collapsed) {
                this.collapsed = collapsed;
            },
            removeTab: function(targetName) {
                //獲取所有已開啟的Tabs索引標籤
                let tabs = this.$store.getters.openTabs;
                //獲取當前啟用的Tab索引標籤
                let activeName = this.$store.getters.activeTab;
                //判斷當前啟用的Tab索引標籤和當前被關閉的Tab索引標籤是否相同
                if (activeName === targetName) {
                    //遍歷已開啟的索引標籤
                    tabs.forEach((tab, index) => {
                        //判斷是否相同，並獲取就近需要被啟用索引標籤
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                //啟用索引標籤
                this.$store.commit('setTabActive', activeName);
                //刪除Tab
                this.$store.commit('delTab', tabs.filter(tab => tab.name !== targetName));
            }
        },
        components: {
            TopNav,
            LeftAside
        },
        computed: {//計算屬性
            openCollapse: function() {
                return !this.collapsed ? 'main-aside' : 'main-aside-collapsed'
            },
            openTabs: function() {
                let openTabs = this.$store.getters.openTabs;
                let tabs = [];
                if (null == openTabs)
                    return tabs;
                else {
                    for (let tab of openTabs) {
                        let component = resolve => require.ensure([], () => resolve(require('@/views' + tab.name + '.vue')));
                        tabs.push({
                            title: tab.title,
                            name: tab.name,
                            content: component
                        });
                    }
                    return tabs;
                }
            },
            activeTab: {
                get() {
                    return this.$store.getters.activeTab;
                },
                set(val) {
                    this.$store.commit('setTabActive', val);
                }
            }
        },
        //展示時鐘的方法
        mounted() {//掛載完成
            console.log(this.$route.path);
            if (this.$route.path == '/Home') {
                this.$store.commit('addTab', {
                    title: '首頁',
                    name: '/Home'
                });
                this.$store.commit('setTabActive', '/Home');
            }
 
       let _this = this; // 宣告一個變數指向Vue範例this，保證作用域一致
          this.timer = setInterval(() => {
            _this.date = new Date(); // 修改資料date
          }, 1000)
        },
        beforeDestroy() {
          if (this.timer) {
            clearInterval(this.timer); // 在Vue範例銷燬前，清除我們的定時器
          }
        }
    }
</script>
 
<style>
    .main-container {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }
 
    .main-aside-collapsed {
        /* 在CSS中，通過對某一樣式宣告! important ，可以更改預設的CSS樣式優先順序規則，使該條樣式屬性宣告具有最高優先順序 */
        width: 64px !important;
        height: 100%;
        background-color: #334157;
        margin: 0px;
    }
 
    .main-aside {
        width: 240px !important;
        height: 100%;
        background-color: #334157;
        margin: 0px;
    }
 
    .main-header,
    .main-center {
        padding: 0px;
        border-left: 2px solid #333;
        height: 100%;
        object-fit: fill;
    }
 
    .div-pagination {
        margin: 10px 0px;
        width: 100%;
    }
 
    /* 設定tabs內容面板100%填充父容器 */
    .tabs-panel-fit {
        margin: 0;
        padding: 0;
        /* background-color:#1F2D3D; */
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
 
    /* 設定tabs內容面板的內邊距為0 */
    .el-tabs--border-card>.el-tabs__content {
        padding: 0;
    }
 
    /* 設定tab的表框效果（重要） */
    .el-tabs.el-tabs--border-card {
        box-shadow: none;
        border-bottom: none;
        border: 0;
    }
 
    /*設定索引標籤中第一個首頁索引標籤不能關閉*/
    .el-tabs>.el-tabs__header .el-tabs__item:first-child>span {
        display: none;
    }
 
    /* elementUI dialog彈出框樣式優化 */
    .el-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0 !important;
        transform: translate(-50%, -50%);
        max-height: calc(100% - 30px);
        max-width: calc(100% - 30px);
        display: flex;
        flex-direction: column;
        /* 圓角效果 */
        border-radius: 0.4em;
    }
 
    .el-dialog>.el-dialog__body {
        overflow: auto;
    }
 
    .el-dialog__header {
        background-color: #F5F7FA;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        font-weight: bold;
        padding: 15px 20px 15px;
        /* 圓角效果 */
        border-radius: 0.4em 0.4em 0em 0em;
    }
 
    .el-dialog__body {
        padding: 20px 15px;
    }
 
    .el-dialog__footer {
        background-color: #F5F7FA;
        border-top: 1px solid #ccc;
        padding: 15px;
        /* 圓角效果 */
        border-radius: 0em 0em 0.4em 0.4em;
    }
 
    .el-form>.el-form-item:last-child {
        margin-bottom: 0px;
    }
 
    /* 更改table表格的高亮背景色*/
    /* .el-table tr.current-row>td {
        background: #FFF68F;
    } */
    .el-table .el-table__body tr:hover>td{
        background: #FFF68F;
        font-weight:bold;
        color:#000000;
    }
 
    /* 分頁元件 */
    /* .div-pagination {
        margin: 10px 0px;
        width: 100%;
    } */
</style>