当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Elementui tabs组件内添加组件

Elementui tabs组件内添加组件

2019年06月05日  | 移动技术网IT编程  | 我要评论

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>
  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>

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

1.3. 参考

  1. 参考自陶通的回答

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网