vue el-tabs动态生成 每一个tab包含分别的分页 分页展示互不影响

最近有这样一个需求，一个弹框中有一个tabs切换且tab标签是动态的，每个tab中有一个表格和一个分页。那我们需要怎么做表格内容和分页互不影响呢？（效果如下）


接下来就讲讲具体的实现：
思路：
1. 获取到tabs标签列表 例如：parkingList
2. 在parkingList中添加page（分页）、allList（表格内容） parkingList:[ {page:{},allLiist:[]} ]
3. 用一个currentPark装当前选中的tab

 <el-tabs v-model="activeName" @tab-click="handClick">
        <el-tab-pane
          :label="ele.text"
          :name="String(ele.value)"
          v-for="ele in parkingList"
          :key="ele.value"
        >
          <el-table
            :data="ele.allList"
            style="width: 100%;height:7.375rem;overflow: auto;"
            :header-cell-style="{
              background: '#FAFAFA',
              color: '#000000',
              borderRight: '1px solid #fff'
            }"
          >
            <el-table-column label="#" min-width="20" type="index">
              <template slot-scope="scope">
                <span v-text="getIndex(scope.$index)"></span>
              </template>
            </el-table-column>
            <el-table-column label="号码" prop="plate_no">
            </el-table-column>
            <el-table-column label="小图">
              <template slot-scope="scope">
                <img
                  v-if="scope.row.plate_no_img"
                  :src="'data:image/jpeg;base64,' + scope.row.plate_no_img"
                  style="width: 127px;height: 35px;"
                />
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="时间" prop="created_time">
              <template slot-scope="scope">
                {{ scope.row.catch_date | dataSecFormat }}
              </template>
            </el-table-column>
            <el-table-column label="所属人">
              <template slot-scope="scope">
                <span v-if="scope.row.own_name">{{ scope.row.own_name }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="名字">
              <template slot-scope="scope">
                <span v-if="scope.row.entrance_name">{{
                  scope.row.entrance_name
                }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="信息">
              <template slot-scope="scope">
                <span v-if="scope.row.parking_lot">{{
                  scope.row.parking_lot
                }}</span>
                <span v-else>-</span>
              </template></el-table-column
            >
          </el-table>
          <MyPagination
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :query="ele.page"
          />
        </el-tab-pane>
      </el-tabs>


	data() {
    return {
      activeName: '',// 当前选中的tab
      parkingList: [],
      currentPark: []
    }
  },
  methods:{
  	//tab切换事件
  	 handClick(val) {
      this.currentPark = this.parkingList.filter(
        item => item.value == this.activeName
      )
      if (this.currentPark[0].allList.length === 0) {
        this.getList()
      }
    },
    
    async getList(val) {
      this.currentPark[0].allList = []
      const {
        data: { content, totalElements }
      } = await this.$myRequest(this.$api.getCarRecordList, {
        center_id: Number(this.activeName),
        pageIndex: this.currentPark[0].page.pageIndex - 1,
        pageSize: this.currentPark[0].page.pageSize
      })
      this.currentPark[0].allList = content
      this.currentPark[0].page.total = totalElements
    },
    
    //每页多少条发生改变
    handleSizeChange(pageSize) {
      this.currentPark[0].page.pageSize = pageSize
      this.currentPark[0].page.pageIndex = 1
      this.getList()
    },
    
	//页码发生改变
    handleCurrentChange(pageIndex) {
      this.currentPark[0].page.pageIndex = pageIndex
      this.getList()
    }
  },
  watch: {
    visible: function(val) {
      if (!val) return
      if (this.parkingNameList.length != 0) {
        this.$nextTick(() => {
          this.activeName = String(this.parkingNameList[0].value)
          this.parkingList = []
          let temp = JSON.parse(JSON.stringify(this.parkingNameList))
          temp.forEach(item => {
            item = {
              ...item,
              page: { pageIndex: 1, pageSize: 10, total: 0 },
              allList: []
            }
            this.parkingList.push(item)
          })
          this.currentPark = this.parkingList.filter(
            item => item.value == this.activeName
          )
          this.getList()
        })
      }
    }
  }

提示：我这个办法并不是最优的，如你有更优的解决办法可以给我讲讲哟~