elementUi之分页组件的简单封装

因elementUi分页封装成单独组件当前页存在bug，没有在父组件设置当前页。 如有需要可在分页组件单独设置

在使用页面(父页面)

<!-- 向子组件传total值(总数)，接收子组件sizeChange事件(每页显示条数)，接收子组件currentChange事件(当前页) -->

    <paging 
      :total="querycdt.total" 
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange">
    </paging>

    components:{
      paging : require('@/components/common/paging.vue').default,  // 引入分页组件
    }

  // 每页显示多少条
  handleSizeChange(val){
    this.querycdt.pageLength = val // 每页多少条
    this.getUserList()  // 刷新
  },
  // 当前页
  handleCurrentChange(val) {
    this.querycdt.pagenum = val // 当前页
    this.getUserList()  // 刷新
  }

在 paging 组件页面

<template>
  <div>
    <el-pagination
      @size-change='handleSizeChange'
      @current-change="handleCurrentChange"
      :page-sizes="[10,20,30]"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="querycdt.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ['total'],
  methods:{
    handleSizeChange(val){
      // console.log(`每页${val}条`)
      // 向父组件传递sizeChange事件，传入val值
      this.$emit('sizeChange',val)
      
    },
    handleCurrentChange(val){
      // console.log(`当前页:${val}`)
      this.$emit('currentChange',val)
    }
  }
}
</script>

<style lang="less" scoped>
</style>

删除页面最后一条数据时，currentPage没有减一，页面列表为空
思路：监听页面的总条数，并对总条数进行判断。
当页面总条数 = （当前页数-1）*当前页条数，currentPage减1，重新获取列表

props: ['querycdt'],   // 直接接收父组件传过来的querycdt分页对象
// querycdt.totalNum 数据总条数   
// querycdt.currentPage 当前页    
// querycdt.pageSize 每页显示的数据条数  

watch: {
  'querycdt.currentPage':{ //监听props传过来的querycdt对象的currentPage(当前页)
    handler(){ // 随便写在一个函数内
      if(this.querycdt.totalNum==(this.querycdt.currentPage-1)*this.querycdt.pageSize&& this.querycdt.totalNum!=0){ //这一行是关键代码，倍数关系
        this.querycdt.currentPage -= 1
        this.geiList()//获取表格数据的方法
      }
    }
  }
},

额外说一点，数据的每个序号，一般用
item.index= this.querycdt.pageSize * (this.querycdt.currentPage - 1) + (index + 1);