vue.js自定義分頁(pagination)組件，一個頁面多個分頁時，某一個分頁選中的頁碼會串到另外的分頁上？

自己嘗試著寫了一個分頁組件，現(xiàn)在有一個bug，就是一個頁面有多個分頁的時候，當(dāng)點擊其中某一個分頁頁碼（例如第3頁），另外的分頁也會跳到這個頁碼上——這個問題比較嚴(yán)重了，假設(shè)第一個分頁一共有8頁，但是第2個分頁只有3頁，當(dāng)?shù)谝粋€分頁選中第5頁時，第2個分頁是無法選中頁碼的。并且每個分頁應(yīng)該是獨立的，相互不影響的。

下面是代碼

pagination.vue文件（已去掉css代碼）

<template>
    <div class="pagination-container">
        <div class="num-wrap clearfix">
            <span class="show-for-pc total-warp">共{{ total }}條記錄</span>
            <span v-for="idx in indexs" :key="idx" @click="gotoPage(idx)" :class="currentNum == idx ? 'current-num' : 'num'">{{ idx }}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: "pagination",
  props: {
    //當(dāng)前頁
    currentPage: {
      type: Number,
      default: 1
    },
    //每頁顯示多少條
    pageSize:{
      type: Number,
      default: 10      
    },
    //總記錄
    total:{
      type: Number,
      default: 0
    },
    //中間顯示多少個頁面編號
    showPageNum: {
      type: Number,
      default: 5, //最小為 3
    },
  },
  data() {
    return {
      //當(dāng)前頁碼
      currentNum: this.currentPage, 
    }
  },
  methods: {
    //跳轉(zhuǎn)到第幾頁
    gotoPage(curNum) {
      if (curNum != this.currentNum) {
        this.currentNum = curNum;
        if(this.currentNum > this.totalPage){
          this.currentNum = this.totalPage;
        }else if(this.currentNum < 1){
          this.currentNum = 1;
        }
        //通知調(diào)用方，當(dāng)前選中的頁碼
        this.$emit("pageChanged", this.currentNum);
      }
    },

  },
  computed: {
    //顯示頁碼集合
    indexs: function() {
      var startPoint = 1;
      var endPoint = this.totalPage;
      var ar = [];
      if (this.totalPage > this.showPageNum) {
        var middleTmp = Math.floor(this.showPageNum / 2)
        if (this.currentNum > middleTmp && this.currentNum < this.totalPage - middleTmp) {
          startPoint = this.currentNum - middleTmp;
          endPoint = this.currentNum + middleTmp;
        } else {
          if (this.currentNum <= middleTmp) {
            startPoint = 1;
            endPoint = this.showPageNum;
          } else {
            endPoint = this.totalPage;
            startPoint = this.totalPage - (this.showPageNum - 1);
          }
        }
      }
      while (startPoint <= endPoint) {
        ar.push(startPoint);
        startPoint++;
      }
      return ar;
    },
    //總頁數(shù)
    totalPage(){
      return parseInt(this.total / this.pageSize) + (this.total % this.pageSize == 0 ? 0 : 1); 
    },
  },
};

</script>

調(diào)用頁面代碼（已去掉css代碼和不重要js代碼）：

<template>
    <div class="tab_wrap">
      <div :class="tabIdx == 1 ? 'active' : 'unactive'" @click="toggleTabIdx(1)">列表a</div>
      <div :class="tabIdx == 2 ? 'active' : 'unactive'" @click="toggleTabIdx(2)">列表b</div>
      <div :class="tabIdx == 3 ? 'active' : 'unactive'" @click="toggleTabIdx(3)">列表c</div>
    </div>
    <!-- 省略lista表格 -->
    <pagination v-if="tabIdx == 1" :pageSize='pageSize' :currentPage='list_aCurrPage' :total='list_aTotal' @pageChanged='list_aPageChanged'></pagination>
    <!-- 省略listb表格 -->
    <pagination v-if="tabIdx == 2" :pageSize='pageSize' :currentPage='list_bCurrPage' :total='list_aTotal' @pageChanged='list_bPageChanged'></pagination>
    <!-- 省略listc表格 -->
    <pagination v-if="tabIdx == 3" :pageSize='pageSize' :currentPage='list_cCurrPage' :total='list_cTotal' @pageChanged='list_cPageChanged'></pagination>
</template>

<script>
import Pagination from '@/views/common/Pagination'
export default {
  data(){
    return {
      //默認顯示“列表a”
      tabIdx: 1, 
      //所有表格默認顯示6條數(shù)據(jù) 
      pageSize: 6,      
      //列表一
      list_a: [],//列表a記錄
      list_aCurrPage: 1,//列表a當(dāng)前頁碼 
      list_aTotal: 0,//列表a總記錄數(shù)
      //列表二
      list_b: [],
      list_bCurrPage: 1,
      list_bTotal: 0,
      //列表三
      list_c: [],
      list_cCurrPage: 1,
      list_cTotal: 0,

    }
  },
  methods:{
    //切換表格 
    toggleTabIdx(idx){
      this.tabIdx = idx;
    },
    //列表a頁碼選擇事件
    list_aPageChanged(_pageNum){
      this.list_aCurrPage = _pageNum;
      this.getListA();
    },
    list_bPageChanged(pageNum){
      this.list_bCurrPage = pageNum;
      this.getListB();
    },
    list_cPageChanged(pageNum){
      this.list_cCurrPage = pageNum;
      this.getListC();
    },        
    getListA(){
      this.isShowLoading = true;
      this.$store.dispatch("getListaDatas", {
        pageNumber: this.list_aCurrPage,
        pageSize: this.pageSize,
      }).then(res => {
        let datas = res.data.data;
        this.list_a = datas.list;
        this.list_aTotal = datas.total;
      })
    },
    getListB(){
      this.isShowLoading = true;
      this.$store.dispatch("getListbDatas", {
        pageNumber: this.list_bCurrPage,
        pageSize: this.pageSize,
      }).then(res => {
        let datas = res.data.data;
        this.list_b = datas.list;
        this.list_aTotal = datas.total;
      })
    },
    getListC(){
      this.isShowLoading = true;
      this.$store.dispatch("getListcDatas", {
        pageNumber: this.list_cCurrPage,
        pageSize: this.pageSize,
      }).then(res => {
        let datas = res.data.data;
        this.list_c = datas.list;
        this.list_cTotal = datas.total;
      })
    },
  },
  components:{
    Pagination, 
  },
  mounted(){
    this.getListA();    
  },
  watch:{
    tabIdx(val){
      if(val == 1){        
        this.list_aPageChanged(1)
      }else if(val == 2){
        this.list_bPageChanged(1);
      }else if(val == 3){
        this.list_cPageChanged(1);
      }
    }
  }
}
</script>