vue-cli+elment-ui 标签页动态加载组件(el-tabs)

用到的组件

el-tabs标签页，<component>标签，用:is切换加载

功能

动态切换标签页并显示不同组件内容

效果图

标题实现代码

//.vue单文件

<template>
  <div :class="bemCss('tabs')">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in this.tabsData"
        :key="index"
        :label="item.labelName"
        :name="item.tabName"
        v-if="item.show"
      >
        <keep-alive>
          <component :is="currentTabComponent"></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import create from "../../core/create";

export default create({
  name: "tabs",
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    tabsData: function () {
      return this.option.tabsData || [];
    },
  },
  data() {
    return {
      currentTabComponent: this.option.currentTabComponent||"",
      activeName: this.option.activeName || "",
    };
  },
  methods: {
    handleClick(tab) {
      this.currentTabComponent=tab.paneName;
    },
  },
});
</script>

<style scoped lang="scss">
$theme-color: #ff0000;
$height: 50px;

.hxvue-tabs {
  &__tabs {
    position: absolute;
    >>> .el-tabs {
      &__item {
        font-size: 16px;
        font-family: Segoe UI, Segoe UI-Bold;
        font-weight: 800;
        color: #909399;
        &.is-active {
          color: $theme-color;
        }
        &:hover {
          color: $theme-color;
        }
      }
      &__header {
        height: $height;
      }
      &__active-bar {
        background-color: $theme-color;
        height: 3px;
      }
      &__nav {
        height: $height;
        &-wrap {
          height: $height;
          &::after {
            height: 0;
          }
        }
        &-scroll {
          height: $height;
        }
      }
    }
  }
}
</style>

//使用代码

<script>
    //开始生成测试数据
    const demoData = [];
    const demoDataNum = 5;
    let active = "";
    const tabName = ["tab-one", "tab-two", "tab-three", "tab-four", "tab-five"];
    for (let i = 0; i < demoDataNum; i++) {
      demoData.push({
        labelName: Mock.mock("@ctitle(2, 5)"),
        tabName: tabName[i],
        show: Mock.mock({
          "boolean|1": true,
        }).boolean,
      });
    }
    for (let i = 0; i < demoDataNum; i++) {
      if (demoData[i].show === true) {
        active = demoData[i].tabName;
        break;
      }
    }
    Vue.component("tab-one", {
      template: "<div>This is tab one.</div>",
    });
    Vue.component("tab-two", {
      template: "<div>This is tab two.</div>",
    });
    Vue.component("tab-three", {
      template: "<div>This is tab three.</div>",
    });
    Vue.component("tab-four", {
      template: "<div>This is tab four.</div>",
    });
    Vue.component("tab-five", {
      template: "<div>This is tab five.</div>",
    });
    new Vue({
      el: "#app",
      data() {
        return {
          option: {
            currentTabComponent:active,
            activeName: active,
            cardSpan: 4,
            tabsData: demoData,
          },
        };
      },
      methods: {},
    });
  </script>

关键代码

@tab-click="handleClick"

这个是el-tabs官方给出的切换标签页使用的方法

:name="item.tabName"

绑定每个el-tab-pane的name

<keep-alive>
     <component :is="currentTabComponent"></component>
</keep-alive>

动态加载组件，这个在vue.js官方文档中可以找到

handleClick(tab) {
      this.currentTabComponent=tab.paneName;
},

通过在控制台输出tab我们可以看到，tab中的paneName属性值就和我们绑定的tabName是同一个值，所以用这个来确定当前加载的组件是什么，让tabName和组件名称相同就可以实现组件的动态切换了，只需要在使用的时候import你要用的页面组件就好了

=========================================================
以上代码在组件开发框架下开发，所以直接拿来使用的话需要做修改，建议看懂了之后再参考编写