Elementui tabs組件內添加組件

1. Elementui tabs組件內添加組件

1.1. 需求

1. 今天的一個需求是在后台框架的基礎上添加tab頁，結果頁面如下
   

2. 原本上述紅框內的內容是不存在的，直接點擊左側菜單欄進行頁面跳轉，現加了tab標簽欄，實現快速的跳轉

1.2. 實現

1. 具體要根據自己的route實現類進行篩選，核心vue如下

<template>
  <div>
    <el-tabs v-model="TabsValue" type="card" closable @tab-remove="removeTab">
      <el-tab-pane style="border-radius: 3px" v-for="(item, index) in Tabs" :key="item.name" :label="item.title" :name="item.name">
        <tab-component style="border-radius: 3px;margin: -15px 10px 0px 10px;" :index="index" :name="index"></tab-component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    name: 'TabBar',
    data(){
      return {
        uniqueOpened: true,
        TabsValue: '',
        Tabs: [],
        index:0,
        tabComponent:{}
      }
    },
    methods: {
      addOneTab(menu) {
        var exist = false;
        for (var i = 0; i < this.Tabs.length; i++) {
          if (menu.name === this.Tabs[i].name) {
            exist = true;
            break
          }
        }
        if (exist === true) {
          this.TabsValue = menu.name;
          return
        }
        this.Tabs.push({
          title: menu.name,
          name: menu.name,
          content: menu.component
        });
        var _this = this;
        this.tabComponent = Vue.component('tab-component', {
          render: function (h) {
            var comp = _this.Tabs[this.index].content;
            return h(comp)
          },
          props: {
            index: {
              type: Number,
              required: true
            }
          }
        });
        this.TabsValue = menu.name
      },
      addTab(e) {
        let first = "/"+e.split("/")[1];
        let two = e.split("/")[2];
        let tempRoutes = this.$router.options.routes;
        for (let i = 0; i < tempRoutes.length; i++) {
          let temp = tempRoutes[i];
          if (temp.path === first) {
            for (let j = 0; j < temp.children.length; j++) {
              let child = temp.children[j];
              if (child.path === two) {
                let menu = {};
                menu.name = child.meta.title;
                menu.component = child.component;
                this.addOneTab(menu);
              }
            }
          }
        }
      },
      removeTab(targetName) {
        let tabs = this.Tabs;
        let activeName = this.TabsValue;
        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.TabsValue = activeName;
        this.Tabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
</script>

2. 上述是tab的實現，再就是菜單選擇調用tab的addTab方法

<el-menu @select="addTab" mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse"
         background-color="#304156" text-color="#fff" active-text-color="#409EFF">
  <sidebar-item :routes="routes"></sidebar-item>
</el-menu>


addTab(e) {
  this.$refs.tabBar.addTab(e);
}

3. 上面代碼會看着有點奇怪，因為SideBar，也就是上述的el-menu所在組件和tab是平級的，如下

<template>
  <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
    <sidebar ref="sidebar" @addTab="addTab" class="sidebar-container"></sidebar>
    <div class="main-container">
      <navbar></navbar>
      <tab-bar ref="tabBar"></tab-bar>
      <app-main></app-main>
    </div>
  </div>
</template>

siderBar和tab-bar在同一個組件內，所以要實現參數傳遞，需要先emit提交事件，再在父組件傳遞給另一個子組件，這樣鏈路就完整了，沒看懂我的看下面的參考吧，我也是參考它的結合自己的代碼實現

1.3. 參考

1. 參考自該問答陶通的回答