1.demo地址

https://github.com/Duyuting0305/Learn-job/tree/master/my-project

2.效果图

自制一个简单的demo，主要是后台管理系统的主页的大致框架，包括左侧导航栏与右侧上方tab标签页的切换，在此做一个总结。下面先放上效果图。

3.NavMenu 导航菜单/侧边栏

src/components/nav.vue

  <el-menu
          id="elmenu"
          class="el-menu-vertical-demo mymenu"
          @open="handleOpen"
          @close="handleClose"
          background-color="#191A23"
          :default-active="active"
          text-color="#B0BBB4"
          active-text-color="#FFFFFF"
          :collapse="isCollapse"
          :class="[this.isCollapse?'el-menu-vertical-demo1':'el-menu-vertical-demo2']"
        >
            <div v-for="item in Tabs" :key="item.name">
              <el-submenu
                v-if="item.childs && item.childs.length"
                :key="item.name"
                :index="item.name"
              >
                <template slot="title">
                  <i :class="item.class"></i>
                  <span>{{item.title}}</span>
                </template>

                <el-menu-item
                  @click="goTo(icon)"
                  v-for="icon in item.childs"
                  :key="icon.name"
                  :index="icon.name"
                >
                <span>{{icon.title}}</span>
                </el-menu-item>
              </el-submenu>

              <el-menu-item v-else :index="item.name" :key="item.name" @click="goTo(item)">
                <i :class="item.class"></i>
                <span>{{item.title}}</span>
              </el-menu-item>
            </div>
        </el-menu>

 Tabs: [
        {
          title: "Tab 1",
          name: "1",
          close: true,
          class: "icon iconfont icon-gauge",
          childs: [
            {
              title: "choose one",
              name: "1-1",
              path: "/chooseone",
              close: true
            },
            {
              title: "choose two",
              name: "1-2",
              path: "/choosetwo",
              close: true
            }
          ]
        },
        {
          title: "Tab 2",
          name: "2",
          path: "/index",
          close: true,
          class: "icon iconfont icon-doc_c"
        },
        {
          title: "Tab 3",
          name: "3",
          path: "/demo",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 4",
          name: "4",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 5",
          name: "5",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 6",
          name: "6",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 7",
          name: "7",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 8",
          name: "8",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 9",
          name: "9",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 10",
          name: "10",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 11",
          name: "11",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 12",
          name: "12",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        },
        {
          title: "Tab 13",
          name: "13",
          path: "/index",
          close: true,
          class: "icon iconfont icon-progress"
        }
      ],

 // 去往不同的路由
   goTo(item) {
      this.addTab(item);
      this.editableTabsValue = item.name;
      this.activeIndex = item.name;
      this.$router.push(item.path);
    },

1.通过对class做一个三目运算的判断，绑定editableTabsValue值，将侧边栏的颜色与Tab做一个联动。
2.导航栏收缩的时候有遇到字不隐藏的情况，看了很久的原因，是因为在v-for循环渲染的时候外面多加了个div，改变了el—menu的结构。所以加了两个样式。如下：

 .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
 .el-menu--collapse .el-menu-item span{
   display: none;
 }

4.Tab和下拉框（三个关闭功能）

  <el-tabs
            class="tabs"
            v-model="editableTabsValue"
            type="card"
            @tab-remove="removeTab"
            @tab-click="changetab"
          >
            <el-tab-pane
              v-for="(item) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              :closable="item.close"
            ></el-tab-pane>
          </el-tabs>
          <!-- 下拉选择框 -->
          <el-dropdown>
            <el-button type="primary" class="select">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="closePresent">关闭当前标签</el-dropdown-item>
              <el-dropdown-item @click.native="closeOthers">关闭其他标签</el-dropdown-item>
              <el-dropdown-item @click.native="closeAll">关闭所有标签</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

 //添加tab
    addTab(item) {
      this.targetclickname = item.name;
      //如果已经打开了，则不添加
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (item.name == this.editableTabs[i].name) {
          return;
        }
      }
      let newTabName = item.name;
      this.editableTabs.push({
        title: item.title,
        name: item.name,
        path: item.path,
        close: true
      });
      this.editableTabsValue = newTabName;
    },
    //关闭tab
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      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.$router.push(nextTab.path);
            }
          }
        });
      }
      this.targetclickname = activeName;
      this.active = activeName;
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    //点击tab,切换导航颜色
    changetab(targetName) {
      this.targetclickname = targetName.name;
      let tabs = this.editableTabs;
      let activeName = targetName.name;
      tabs.forEach((tab, index) => {
        if (tab.name === targetName.name) {
          this.$router.push(tab.path);
        }
      });
      this.editableTabsValue = activeName;
      this.active = activeName;
    },
    //关闭当前tab
    closePresent() {
      // console.log(this.targetclickname)
      if (this.targetclickname == "1") {
        return;
      }
      this.removeTab(this.targetclickname);
    },
    //关闭其他tab
    closeOthers() {
      // console.log(this.targetclickname)
      let doubleTab = this.editableTabs;
      let arr = [
        {
          title: "Tab 2",
          name: "2",
          path: "/index",
          close: null,
          class: "icon iconfont icon-doc_c"
        }
      ];
      let that = this;
      doubleTab.forEach(function(item) {
        // console.log(item.name)
        if (that.targetclickname == "1") {
          that.closeAll();
          return;
        } else if (
          item.name == that.targetclickname &&
          that.targetclickname != "1"
        ) {
          arr.push(item);
        }
      });
      console.log(arr);
      this.editableTabs = arr;
      console.log(this.editableTabs);
    },
    //关闭所有
    closeAll() {
      this.editableTabs = [
        {
          title: "Tab 2",
          name: "2",
          path: "/index",
          close: null,
          class: "icon iconfont icon-doc_c"
        }
      ];
      this.editableTabsValue = "2";
      this.active = "2";
    }

注意：
1.router-view写在el-tab-pane中。
2.在addtab中，需要对tab是否打开做一个判断；
3.在NavMenu 导航菜单中的goto方法中，执行addtap方法，将两者联动。

这是自己以自己的想法做的一个demo，可能有不够完善偏差的地方，还请各位同行批评指正，不吝赐教。