vue elementui el-tabs切换tab重新加载
2个tabs建议使用：
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="审核提醒" name="first" lazy key="'first'">
<ReviewRemind v-if="isFirst" />
</el-tab-pane>
<el-tab-pane lazy label="统计分析" name="second" key="'second'">
<StatisticalAnalysis v-if="isSecond" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import ReviewRemind from './ReviewRemind.vue'
import StatisticalAnalysis from './StatisticalAnalysis.vue'
export default {
data() {
return {
activeName: 'first',
isFirst: true,
isSecond: false
}
},
components: {
ReviewRemind,
StatisticalAnalysis,
},
methods: {
handleClick(tab) {
if (tab.name === 'first') {
this.isFirst = true
this.isSecond = false
} else if (tab.name === 'second') {
this.isFirst = false
this.isSecond = true
}
}
}
}
</script>
2个以上tabs建议使用：
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="动态更新" name="one">
<p v-if="tabRefresh.one">动态更新</p>
</el-tab-pane>
<el-tab-pane lazy label="超量预警" name="two">
<ExcessWarning v-if="tabRefresh.two" />
</el-tab-pane>
<el-tab-pane label="问题线索" name="three">
<ProblemClue v-if="tabRefresh.three" />
</el-tab-pane>
<el-tab-pane label="数据对比" name="four">
<p v-if="tabRefresh.four">数据对比</p>
</el-tab-pane>
<el-tab-pane lazy label="站点匹配" name="five">
<SiteMatch v-if="tabRefresh.five" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import ExcessWarning from "./ExcessWarning.vue";
import SiteMatch from "./SiteMatch.vue";
import ProblemClue from "./ProblemClue.vue";
export default {
data() {
return {
activeName: "one",
tabRefresh: {
one: true,
two: false,
three: false,
four: false,
five: false,
},
};
},
components: {
ExcessWarning,
SiteMatch,
ProblemClue,
},
methods: {
handleClick() {
switch (this.activeName) {
case "one":
this.switchTab("one");
break;
case "two":
this.switchTab("two");
break;
case "three":
this.switchTab("three");
break;
case "four":
this.switchTab("four");
break;
case "five":
this.switchTab("five");
break;
default:
alert("默认，选择出错");
console.log("wrong choice");
}
},
switchTab(tab) {
for (let [key, value] of Object.entries(this.tabRefresh)) {
if (key == tab) {
this.tabRefresh[key] = true;
} else {
this.tabRefresh[key] = false;
}
}
},
},
};
</script>
补充：
其中Object.entries( ) 该方法返回一个数组，成员时参数对象自身的（不含继承的）所有可遍历属性的键值对数组
const obj = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 'abc']]
