表格分页——tablePagination

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

分页组件：

<template>
  <el-pagination
    style="margin-top: 15px"
    @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 []
      }
    }
  },
  data () {
    const pageSizes = [15, 25, 50, 100]
    return {
      currentPage: 1,
      pageSizes: pageSizes,
      pageSize: pageSizes[0]
    }
  },
  computed: {
    pageTotal () { // 分页前总条数
      return this.tableBegin.length
    }
  },
  watch: {
    tableBegin: {
      immediate: true,
      handler (val) {
        // console.log('监听传入的数据变化', val)
        this.currentPage = 1
        this.pageSize = 15
        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) {
      console.log(`每页pageSize ${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) {
      console.log(`当前页currentPage: ${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='getTablePagination'/>

// 分页
getTablePagination (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监听改变

来源：https://www.cnblogs.com/wheatCatcher/p/11362557.html