vue.js自定义分页(pagination)组件，一个页面多个分页时，某一个分页选中的页码会串到另外的分页上？

Question

自己尝试着写了一个分页组件，现在有一个bug，就是一个页面有多个分页的时候，当点击其中某一个分页页码（例如第3页），另外的分页也会跳到这个页码上——这个问题比较严重了，假设第一个分页一共有8页，但是第2个分页只有3页，当第一个分页选中第5页时，第2个分页是无法选中页码的。并且每个分页应该是独立的，相互不影响的。

下面是代码

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: {
    //当前页
    currentPage: {
      type: Number,
      default: 1
    },
    //每页显示多少条
    pageSize:{
      type: Number,
      default: 10      
    },
    //总记录
    total:{
      type: Number,
      default: 0
    },
    //中间显示多少个页面编号
    showPageNum: {
      type: Number,
      default: 5, //最小为 3
    },
  },
  data() {
    return {
      //当前页码
      currentNum: this.currentPage, 
    }
  },
  methods: {
    //跳转到第几页
    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;
        }
        //通知调用方，当前选中的页码
        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;
    },
    //总页数
    totalPage(){
      return parseInt(this.total / this.pageSize) + (this.total % this.pageSize == 0 ? 0 : 1); 
    },
  },
};

</script>

调用页面代码（已去掉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条数据 
      pageSize: 6,      
      //列表一
      list_a: [],//列表a记录
      list_aCurrPage: 1,//列表a当前页码 
      list_aTotal: 0,//列表a总记录数
      //列表二
      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>

Answer 1

复用了？给三个pagination绑定上不同的key="lista"，key="listb"，key="listc"

Answer 2

你的分页组件应该是在切换的时候没有重新渲染。不重新渲染就会保留状态。

我看你B选项卡的分页组件用的一个状态跟A一样了