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

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

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

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

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

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