vue+elementUI实现前端分页

---

前言

大多数情况下都是后端做分页的，前端只需要传递 currentpage / pagesize 即可，当然也有可能遇到后端没有做分页的情况，这时前端需要一次请求拿到所有数据，然后再做分页处理。下面我们就针对前端分页的情况基于vue+elementUI，封装一个分页组件。

---

代码

Pagination组件：

<template>
  	<Pagination :current-page.sync="currentPage" :page-sizes="pageSizeArr" 
  			  	:page-size="pageSize" :total="totalSize"
              	@size-change="onSizeChangeHandler" 
              	@current-change="onCurrentChangeHandler"
              	layout="total, sizes, prev, pager, next, jumper"
              	background />
</template>

<script>
import { Pagination } from 'element-ui'

export default {
  name: 'table-pagination',
  components: { Pagination },
  data() {

    return {
      currentPage: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 50, 100],
      totalSize: 0
    }
  },

  props: {
  // 从后台获取到的所有表格数据tableData
    data: {
      default: function() {
        return []
      },
      type: Array
    }
  },

  watch: {
    data(newData) {
      this.totalSize = newData.length
      this.onCurrentChangeHandler(1)
    }
  },

  methods: {
	// currentPage 改变时会触发
    onCurrentChangeHandler(pageIndex) {

      this.$emit('onTableChange', this.sliceRightData(pageIndex))
    },

	// 分页逻辑
    sliceRightData(pageIndex) {
      let data = this.data

      if(_.isEmpty(data)) {

        return []
      }else{

        return data.slice((pageIndex - 1) * this.pageSize, pageIndex * this.pageSize)
      }
    },

	// pageSize 改变时会触发：
    onSizeChangeHandler(val) {
      this.pageSize = val
      this.currentPage = 1
      this.onCurrentChangeHandler(1)

    }
  }
}
</script>

在数据页面引入分页组件：

<template>
  	<Table :data="currentPageData" :header="tableHeader" />
    <Pagination :data="tableData" @onTableChange="onTableChange" />
</template>

<script>
import Table from '@/components/table'
import Pagination from '@/components/table-pagination'

export default {
  name: 'table-pagination',
  components: {
    Table,
    Pagination
  },
  data() {

    return {
      // 从后台获取到的全部数据	
      tableData: [],
      // 当前页数据
      currentPageData: [],
      //表头数据
      tableHeader: this.getTableHeader()
    }
  },

  methods: {
    onTableChange(pageData) {
      this.currentPageData = pageData
    }
  }
}
</script>

展示效果如图所示：