表格分頁——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監聽改變