<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']]
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
