element ui中tabs页面组件切换没有加载

开发中遇到了一个问题就是我使用element ui中的tabs组件时候，每一个tab内嵌套了一个组件页面，但是我发现当切换之后，生命周期都没有走，页面的方法也没有触发

三个tabs 中放了三个页面组件

只是第一次页面加载进来触发了，后期切换都不能触发

解决方法就是

可以采用 tabs的name和每一个组件的隐藏状态同名，并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放在tabsArr里面
当切换之后 对应handleClick方法会判断当前点击的页面name和tabsArr对象里面哪一个属性名相同，如果相同就改为true，反之其他的隐藏状态改为false

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="tabs1Flag">
        <tabs1 v-if="tabsArr.tabs1Flag"></tabs1>
      </el-tab-pane>

      <el-tab-pane label="配置管理" name="tabs2Flag">
        <tabs2 v-if="tabsArr.tabs2Flag"></tabs2>
      </el-tab-pane>

      <el-tab-pane label="角色管理" name="tabs3Flag">
        <tabs3 v-if="tabsArr.tabs3Flag"></tabs3>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabs1 from "../components/tabs1";
import tabs2 from "../components/tabs2";
import tabs3 from "../components/tabs3";
export default {
  components: { tabs1, tabs2, tabs3 },
  data() {
    return {
      activeName: "tabs1Flag",
      tabsArr: {
        tabs1Flag: true,
        tabs2Flag: false,
        tabs3Flag: false,
      },
    };
  },
  methods: {
    tabs的切换点击方法 tab中的name是当前点击选中的那一项的name的值
    handleClick(tab) {
      for (var key in this.tabsArr) {
        if (tab.name != key) {
          this.tabsArr[key] = false;
        } else {
          this.tabsArr[key] = true;
        }
      }
    },
  },
  created() {},
};
</script>