欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Elementui tabs组件内添加组件

程序员文章站 2022-06-22 21:17:30
1. Elementui tabs组件内添加组件 1.1. 需求 1. 今天的一个需求是在后台框架的基础上添加tab页,结果页面如下 2. 原本上述红框内的内容是不存在的,直接点击左侧菜单栏进行页面跳转,现加了tab标签栏,实现快速的跳转 1.2. 实现 1. 具体要根据自己的route实现类进行筛 ......

1. elementui tabs组件内添加组件

1.1. 需求

  1. 今天的一个需求是在后台框架的基础上添加tab页,结果页面如下
    Elementui tabs组件内添加组件

  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>
  1. 上述是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);
}
  1. 上面代码会看着有点奇怪,因为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>

siderbartab-bar在同一个组件内,所以要实现参数传递,需要先emit提交事件,再在父组件传递给另一个子组件,这样链路就完整了,没看懂我的看下面的参考吧,我也是参考它的结合自己的代码实现

1.3. 参考

  1. 参考自陶通的回答