表格分页——tablePagination

背景：表格是最为通用的展示方式，为了展示的统一性，以及分页组件的重用，这里写一个分页组件，供比较多或者较少数据2种表格进行分页展示。

分页组件：

<template>
  <el-pagination
    @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: {
    tableBegin: {// 总数据
      type: Array,
      default () {
        return []
      }
    },
    pageSizes: {// 分页条数：数据较多设置为[25,50,100]
      type: Array,
      default () {
        return [10, 20, 30]
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    pageTotal () { // 分页前总条数
      return this.tableBegin.length
    }
  },
  watch: {
    tableBegin: {
      immediate: true,
      handler (val) { // 加载数据
        this.currentPage = 1
        this.pageSize = this.pageSizes[0] || 10
        const begin = (this.currentPage - 1) * this.pageSize
        const end = this.currentPage * this.pageSize
        const tableData = this.tableBegin.slice(begin, end)
        this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
      }
    }
  },
  methods: {
    // 每页条数
    handleSizeChange (val) {
      this.pageSize = val
      const begin = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      const tableData = this.tableBegin.slice(begin, end)
      this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
    },
    // 第几页
    handleCurrentChange (val) {
      this.currentPage = val
      const begin = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      const tableData = this.tableBegin.slice(begin, end)
      this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
    }
  }
}
</script>

使用示例：

import pagination from 'module-comp/tablePagination'

<pagination
    :table-begin='tableBegin'
    @table-pagination-change='getTableData'/>

// 展示数据
getTableData (data, currentPage, pageSize) {
  this.tableData = data // 只需要赋值一次，其他情况均有传入的分页的数据回调处理
  this.currentPage = currentPage
  this.pageSize = pageSize
}

// 删除
deleteRow (index, row) {
  this.tableBegin.splice((this.currentPage - 1) * this.pageSize + index, 1)
  // this.tableData.splice(index, 1)
}

说明：

加入分页后表格的展示数据均由分页控制，即通过传入的tableBegin监听改变