el-pagination分页优化

表格分页优化：

<template>
  <el-pagination
    small
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageTotal"
  />
</template>
<script>
export default {
  props: {
    resetPageSize: {// 重置页面
      type: Boolean,
      default: false
    },
    dataTotal: {// 总条数
      type: [String, Number],
      default: 0
    },
    tableBegin: {// 总数据
      type: Array,
      default () {
        return []
      }
    },
    pageSizes: {// 分页条数：自定义[10,20,30]
      type: Array,
      default () {
        return [15, 25, 50, 100]
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 15
    }
  },
  computed: {
    pageTotal () { // 分页前总条数：后台读取或直接计算传入数据
      return this.dataTotal || this.tableBegin.length
    }
  },
  watch: {
    tableBegin: {
      immediate: true,
      handler () { // 加载数据:初始化、更新数据
        this.resetSize()
        this.updateData()
      }
    },
    resetPageSize: {
      immediate: false,
      handler () { // 切换路由等:重置分页
        this.resetSize()
      }
    }
  },
  methods: {
    // 跳转到第几页
    handleCurrentChange (val) {
      this.currentPage = val
      this.updateData()
    },
    // 设置分页条数
    handleSizeChange (val) {
      this.resetSize()
      this.pageSize = val
      this.updateData()
    },
    // 重置分页
    resetSize(){
      this.currentPage = 1
      this.pageSize = this.pageSizes[0] || 15
    },
    // 更新数据
    updateData(){
      const begin = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      const tableData = this.tableBegin.slice(begin, end)
      if (this.dataTotal) { // 后台请求：不返回数据
        this.$emit('table-pagination-update', this.currentPage, this.pageSize)
      } else {
        this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
      }
      this.$emit('change', tableData, this.currentPage, this.pageSize)
    }
  }
}
</script>

如何使用：

    <!-- 页码 -->
    <pagination
      style="margin-top:10px"
      :page-sizes="pageSizes"
      :table-begin="tableBegin"
      @table-pagination-change="getTablePagination"
    />
  </div>
</template>

<script>
import pagination from 'module-comp/tablePagination'
export default {
  components: {
    pagination
  },

    // 分页方法
    getTablePagination (data, currentPage, pageSize) {
      this.tableData = data
      this.currentPage = currentPage
      this.pageSize = pageSize
    },

后台控制返回：

     <pagination
        ref="pager"
        style="margin-top:20px"
        :data-total="dataTotal"
        :reset-page-size="resetPageSize"
        @table-pagination-update="tablePaginationLoad"
      />

    // 表格分页：点击分页后拉新业务
    tablePaginationLoad (pagenum, pagesize) {
      this.pagenum = pagenum - 1
      this.pagesize = pagesize
    this.featureSearchChange(this.keyWords,this.businessIdSet,false)
    },

 // 搜索:所有数据的刷新
    featureSearchChange (val, businessId, resetPageSize) {
      if (resetPageSize) { // 搜索时切换业务
        this.pagenum = 0
        this.resetPageSize = !this.resetPageSize
      }
      const businessIdSet = businessId || ''
      const paramet = {
        'business.id': this.globalPage ? businessIdSet : this.businessIdSet,
        'pagenum': this.pagenum,
        'pagesize': this.pagesize,
        'authority': this.authority, // 个人或公共
        'keyword': val || ''
      }
      this.onLoadData(paramet)
    },
    // 重置分页
    // resetSize(){
    //   this.$refs.pager.resetSize()
    // },
    // 加载数据getAllData()
    onLoadData (paramet) {
      if (paramet) {
        this.loadingData = true
        getAllData(paramet).then(res => {
          if (res && res.data && res.data.err_code === '0' && res.data.info) {
            const result = res.data.info
            this.dataTotal = res.data.num || 0 // 总条数
            const tableData = [] // 展示数据
            if (result && result.length > 0) { // 省略遍历自定义result
              this.tableBegin = tableData
              this.loadingData = false
            } else {
              this.tableBegin = []
              this.loadingData = false
            }
          } else {
            this.tableBegin = []
            this.dataTotal = 0 // 总条数
            this.$message.error(res.data ? res.data.err_desc : '获取特征数据失败')
            this.loadingData = false
          }
        }).catch(() => {
          this.loadingData = false
          this.$message.error('获取数据失败')
        })
      }
    }
  }

-end-