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']]