elementUI el-tabs 实现动态选项卡页面效果

 

<!-- 左侧导航菜单组件 -->
<el-menu :default-active="$route.path" class="el-menu-vertical" 
@select="menuSelect" :collapse="isCollapse">
  <template v-for="(a, $i) in navList">
    <!-- 有子栏目--->
    <el-submenu :key="$i" :index="a.path" v-if="a.children && a.
children.length">
      <template slot="title">
        <i :class="a.icon" /> <span>{{ a.label }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="(subItem, $i) in a.children || []" 
:key="$i" :index="subItem.path"><span
            class="sub-text">{{
              subItem.label
            }}</span></el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <!-- 没有子栏目-->
    <el-menu-item :key="$i" :index="a.path" v-else>
      <i :class="a.icon" /> <span>{{ a.label }}</span>
    </el-menu-item>
  </template>
</el-menu>


<!-- 选项卡组件 -->
<el-tabs v-if="tabs.length" v-model="curTabPath" type="border-card" 
closable @tab-remove="tab_remove">
  <el-tab-pane v-for="a in tabs" :key="a.path" :label="a.label" :name="a.
path">
    <!-- 这里添加页面组件 -->
    <sy v-if="a.path === 'sy'" />

    <khgl v-if="a.path === 'khgl'" />
    <bjkd v-if="a.path === 'bjkd'" />
    
    <jh v-if="a.path === 'jh'" />
    <tuihuo v-if="a.path === 'tuihuo'" />

    <kc v-if="a.path === 'kc'" />
    <spxx v-if="a.path === 'spxx'" />
    <rk v-if="a.path === 'rk'" />
    <ck v-if="a.path === 'ck'" />
  </el-tab-pane>
</el-tabs>

//引入内页组件
import sy from "./sy";
import khgl from "./khgl";
import bjkd from "./bjkd";
import jh from "./jh";
import tuihuo from "./th";
import kc from "./kc";
import spxx from "./spxx";
import rk from "./rk";
import ck from "./ck";

...

  components: {
    sy,
    khgl,
    bjkd,
    jh,
    tuihuo,
    kc,
    spxx,
    rk,
    ck,
  }
  ,
...

data() {
    return {
      // 选项卡----------------------------------------
      curTabPath: 'sy',
      tabs: [
        { 
            label: '首页', 
            path: 'sy', 
        },
        ],
      // ----------------------------------------
      navList: [
        {
          icon: "el-icon-s-home",
          label: "首页",
          path: "sy",
        },
        {
          icon: "el-icon-sold-out",
          label: "销售",
          path: "xs",
          children: [
            {
              label: "客户管理",
              path: "khgl",
            },
            {
              label: "报价开单",
              path: "bjkd",
            },
          ],
        },
        {
          icon: "el-icon-sell",
          label: "采购",
          path: "cg",
          children: [
            {
              label: "进货",
              path: "jh",
            },
            {
              label: "退货",
              path: "tuihuo",
            },
          ],
        },
        {
          icon: "el-icon-house",
          label: "仓库",
          path: "changku",
          children: [
            {
              label: "库存",
              path: "kc",
            },
            {
              label: "商品信息",
              path: "spxx",
            },
            {
              label: "入库",
              path: "rk",
            },
            {
              label: "出库",
              path: "ck",
            },
          ],
        },
      ],
      // ----------------------------------------
    };
  },

//方法
 methods: {
    // 选项卡----------------------------------------
    // 添加选项卡
    tab_add(d) {
      let has = this.tabs.find(v => v.path === d.path);//查找返回单个对象
      if (has) { return this.curTabPath = d.path }
      this.tabs.push({
        path: d.path,
        label: d.label,
      });
      this.curTabPath = d.path;
    },
    // 移除选项卡
    tab_remove(path) {
      let r = [];
      let nextTabPath = null;
      this.tabs.forEach((v, i, ar) => {
        if (v.path === path) {
          this.tabs[i + 1] && (nextTabPath = this.tabs[i + 1].path);
        } else {
          r.push(v);
        }
      });
      // 删除当前高亮选项卡
      if (r.length && this.curTabPath === path) {
        // 如果当前高亮选项卡右侧有选项卡A，就高亮显示A；如果右侧没有选项卡，就高亮显示最后一个选项卡
        this.curTabPath = nextTabPath || r[r.length - 1].path;
      }
      // 删除最后一个选项卡
      if (r.length === 0) {
        this.curTabPath = null;
      }
      this.tabs = r;
    },
    //----------------------------------------
    // 点击导航菜单
    menuSelect(index, path) {
      this.curTabPath = index;
      let curTab = this.getMenuObj(index)
      this.tab_add(curTab)
    },
    // 查找点击菜单对象
    getMenuObj(index) {
      let aa = this.navList
      for (let i = 0, len = aa.length; i < len; i++) {
        let a = aa[i];
        if (a.path === index) return a
        let bb = a.children || [];
        for (let j = 0, bb_len = bb.length; j < bb_len; j++) {
          let b = bb[j];
          if (b.path === index) return b
        }
      }
    },
}