前端实现分页

在开发过程中我遇到这么一个需求我曾经遇到过这个需求，后台说数据分页麻烦，哎没办法这个公司就我和他搞技术的，要是有项目经理肯定不允许后台这么搞，无论数据量大不大，

前端采用的是Vue + ElementUi

下面这是父组件的需要代码

 

<!--html代码-->
<template>
    <paging class="page" :totalCount="total"  :pageSize="pageSize" :tableData="tableData"         
    @getTbles="getTbales"></paging>
</template>




data(){
    totalCount: 0, // totalCount 这是传递给 分页组件的 total 从而显示多少页数
    pageSize:22, // 这是每页表格最多显示多少条
    tableView: [], //这个是给表格显示的数据
    tableData: [], //这是接口返回的所有数据
    defaultData: false //例如用户在第5页，增加后请求数据肯定子啊第1页面那么需要重置组件
},

// 接口数据

create(){
    table().then(res => {
        if(res.success){
            //记得清除this.tableView 因为搜索的时候也会用这个，会造成上次数据没及时清除掉
            this.tableView = []
            this.totalCount = res.data.length
            //进入if 因为他有多页码 else 只有1页
            if (res.data.length >= this.pageSize) {
                for (let i = 0; i < this.pageSize; i++) {
                  this.tableView.push(res.data[i]);
                }
          } else {
            this.tableView = res.data;
          }
        }
    })
},

methods(){
     //用户点击页码组件返回的数据
    tables(table) {
      this.tableView = table;
    }
}

 子组件代码如下

<!--分页-->
<template>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="totalCount"
    :page-size="pageSize"
    :current-page="currentPage"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>

<script>
export default {
  props: {
    totalCount: {
      type: Number,
      default: 10
    },
    pageSize: {
      type: Number,
      default: 10
    },
    tableData: {
      type: Array,
      default: []
    },
    defaultData: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      tableView: [],
      currentPage: 1
    };
  },
  watch: {
    defaultData(newValue) {
        //数据已经被更新
        this.handleCurrentChange(1);
      
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(val);
      //为什么必须不是1 呢 因为点击1是返回初始数据
      if (val != 1)
        val =(val-1) * this.pageSize //比如点击是2，并且pageSize是10的时候 那么数据下标是 10开始就是10
      }
      let number = this.tableData.length;
      // 当点击2的时候如果第二页是最后一页进入else全部展示
      if (number > val + this.pageSize) {
        this.tableView = this.tableData.slice(val, val + this.pageSize);
      } else {
        this.tableView = this.tableData.slice(val, this.tableData.length);
      }
      this.$emit("tables", this.tableView);
    }
  }
};
</script>

 这就是基本代码，但是前面说了假如我在第三页点击增加后，我请求table数据我是不是表格中的数据就是最新的，然后呢

页码也要重恢复初始化

save(){
    //假设已经增加成功了
    if(res.success){
        this.tableData = []
        this.tableView = []
        this.tableData = res.data
        this.totalCount = res.data.length
        //进入if 因为他有多页码 else 只有1页
        if (res.data.length >= this.pageSize) {
           for (let i = 0; i < this.pageSize; i++) {
               this.tableView.push(res.data[i]);
           }
          } else {
            this.tableView = res.data;
          }
        this.defaultData = true //那么就会调用handleCurrentChange(1)
        
    }
}

如果小伙伴看到错误希望赶快留言评论哦！！

 谢谢 ^_^