vue+element-ui el-tabs切换面板el-tab-pane切换

在vue项目中，el-tabs在页面的右侧显示，切换面板，下面的内容是正常显示的
效果如下：


代码如下：
父组件

 <el-card>
        <span>数据信息</span>
        <el-tabs
          class="tabRight"
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
        >
       <el-tab-pane label="实时数据图表" name="first" :key="first">
       </el-tab-pane>
         <el-tab-pane label="历史数据图表" name="second" :key="second">
       </el-tab-pane>
        </el-tabs>
          <child1 v-if="activeName=='first'" />
       <child2 v-if="activeName=='second'" />
    </el-card>

<script>
import enviroChild1 from './enviroChild1';
import enviroChild2 from './enviroChild2'
export default {
  name: "",
  components: {
     child1: enviroChild1,
     child2: enviroChild2
  },
 data() {
    return {
      activeName: "first",
        } },


  <style lang="scss" scoped>
.tabRight {
  float: right;
}
</style>

子组件代码enviroChild1和enviroChild2代码一样，所以只贴了一份

<template>
<!-- 历史数据查询 -->
<div>
  
        <el-table :data="allprocessData">
          <!-- <el-table-column :type="index < 10?'0'+'index':''" label="序号" align="center" width="100"> </el-table-column> -->
          <el-table-column prop="index" label="序号" align="center" width="100">
          </el-table-column>
          <el-table-column prop="name" label="组件1111" align="center" width="350">
          </el-table-column>
          <el-table-column prop="classify" label="文件分类" align="center">
          </el-table-column>
          <el-table-column prop="tel" label="联系电话" align="center"> </el-table-column>
          <el-table-column prop="update" label="上传时间" align="center">
          </el-table-column>
          <el-table-column prop="fileType" label="文件格式" align="center">
          </el-table-column>

          <el-table-column label="操作" width="" align="center">
            <template slot-scope="scope">
              <i class="iconfont icon-bianji" style="margin-right: 20px"></i>
              <i class="iconfont icon-chazhaosousuo" style="margin-right: 20px"></i>
              <i class="iconfont icon-icon--shanchu"></i>
            </template>
          </el-table-column>
        </el-table>
     
      <div class="pagination">
        <pages
          class="pagination-left"
          :total="fenye.total"
          :currentPage="fenye.pageNum"
          :pageSize="fenye.pageSize"
          @handleCurrentChangeSub="handleCurrentChange"
          >    </pages
        >  
        <div class="pagination-right"> 共{{ total }}条数据</div>
      </div>
</div>
</template>
<script>
import pages from "@/components/pages";
export default {
  name: '',
  components: {pages},
  props: {},
  data () {
    return {
          fenye: {
        // 总条数
        total: 10,
        // 当前页
        pageNum: 1,
        pageSize: 1,
      },
      total: 22,
       allprocessData:[],
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style lang='scss' scoped>
.pagination {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  .pagination-left {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #404859;
  }
  .pagination-right {
    margin-top: 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #404859;
  }
}
</style>

分页也封装成了组件，代码如下：

<template>
  <div>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="slot,prev"
      :total="total"
    >
      <el-button :disabled="firstPageBtnDisabled" class="first-pager" @click="toFirstPage">首页</el-button>
    </el-pagination>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="pager,next,slot"
      :total="total"
    >
      <el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage">末页</el-button>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "pages",
  components: {},
  data() {
    return {
      currentPageNum: this.currentPage,
      firstPageBtnDisabled: true,
      lastPageBtnDisabled: false,
      lastPageNum: Math.ceil(this.total / this.pageSize)
    };
  },
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    total(newVal, oldVal) {
      this.total = newVal;
      this.lastPageNum = Math.ceil(newVal / this.pageSize);
    }
  },
  created() {},
  methods: {
    handleCurrentChange(val) {
      this.firstPageBtnDisabled = val === 1 ? true : false;
      this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;
      this.currentPageNum = val;
      this.$emit("handleCurrentChangeSub", val);
    },
    toFirstPage(val) {
      this.handleCurrentChange();
    },
    toLastPage(val) {
      this.currentPageNum = this.lastPageNum;
      this.handleCurrentChange(this.lastPageNum);
    }
  },
  created() {},
  mounted() {},
  destroyed() {}
};
</script>
<style>
.el-pagination {
  float: left;
}
</style>