el-pagination删除列表里的最后一条数据，列表内容未刷新

问题描述

使用 elementUI 的 el-pagination的时候，删除列表里的最后一条数据，分页会回到上一页，但是列表没有数据

 

 

解决方案

本来是想着在请求业务层去做的，但是每个分页都要加一大坨代码感觉很麻烦就对 el-pagination进行了一下封装

<template>
  <el-pagination
    v-on="$listeners"
    v-bind="attr"
  >
    <slot></slot>
  </el-pagination>
</template>
<script>
/**
 * 我的PAGE_CONF是一个默认的配置
 * PAGE_CONF = {
 * layout: 'total, sizes, prev, pager, next, jumper',
 * pageSizes: [5, 10, 20, 50, 100],
 * pageSize: 10,
 * pageCount: 5,
 * prevText: '上一页',
 * nextText: '下一页'
 *}
 * */
import { PAGE_CONF } from '@/utils/utils'

export default {
  name: 'pagination',
  data () {
    return {
      pageConf: PAGE_CONF
    }
  },
  computed: {
    total () {
      return this.$attrs && this.hasAttr(this.$attrs, 'current-page') ? this.$attrs.total : 0
    },
    attr () {
      const pageConf = this.pageConf
      return {
        background: true,
        layout: pageConf.layout,
        'page-sizes': pageConf.pageSizes,
        'page-count': pageConf.pageCount,
        'prev-text': pageConf.prevText,
        'next-text': pageConf.nextText,
        ...this.$attrs
      }
    }
  },
  watch: {
    total (newVal) {
      const size = this.$attrs && this.hasAttr(this.$attrs, 'page-size') ? this.$attrs['page-size'] : 10
      const current = this.$attrs && this.hasAttr(this.$attrs, 'current-page') ? this.$attrs['current-page'] : 1
      if (Math.ceil(newVal / size) < current && this.hasAttr(this.$listeners, 'update:current-page')) {
        const currentPage = current - 1
        this.$emit('update:current-page', currentPage > 0 ? currentPage : 1)
        if (this.hasAttr(this.$listeners, 'current-change')) {
          this.$emit('current-change', currentPage)
        }
      }
    }
  },
  methods: {
    hasAttr (data, attr) {
      return Object.prototype.hasOwnProperty.call(data, attr)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

使用方式

  <pagination
    @size-change="initList"
    @current-change="initList"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
   ></pagination>