vue + elementui：分页查询，el-pagination，纯前端分页

效果：

新建pages.js文件，文件内容：

// 数据分页
function pageData (total, pageRow, currentPage, allTableDataList) {
  var dealData = []
  var onePageList = []
  var i = 1
  allTableDataList.forEach((val, index) => {
    onePageList.push(val)
    i++
    if (i > pageRow || index === allTableDataList.length - 1) {
      dealData.push(onePageList)
      i = 1
      onePageList = []
    }
  })
  return dealData[currentPage - 1]
}
export {pageData}

使用：直接引入pages.js中pageData，直接使用

<template>
  <div class="main-container">
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="摄像头ID" prop="cameraId" width="200" show-overflow-tooltip/>
      <el-table-column label="摄像头名称" prop="cameraName" width="250" show-overflow-tooltip/>
      <el-table-column label="rtsp地址" min-width="400" prop="rtspAddr" show-overflow-tooltip/>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        :total="page.total"
        :page-sizes="page.pageSizeList"
        layout=" total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { pageData } from '@/utils/pages'
import { getCameraList } from '@/api/base_setting/cameraManager'
export default {
  name: 'CameraManager',
  data () {
    return {
      // 表格分页展示数据
      tableData: [],
      // 所有数据
      tableDataAll:[],
      // 分页
      page: {
        pageNum: 1,
        pageSize: 15,
        pageSizeList: [15, 30, 50, 100],
        total: 0
      }
    }
  },
  created () {
    this.getTableList()
  },
  methods: {
    // 每页条数更改
    handleSizeChange (val) {
      this.page.pageSize = val
      this.tableData = pageData(this.page.total, this.page.pageSize, this.page.pageNum, this.tableDataAll)
    },
    // 页数更改
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.tableData = pageData(this.page.total, this.page.pageSize, this.page.pageNum, this.tableDataAll)
    },
    // 获取表格数据
    getTableList () {
      this.page.pageNum = 1
      getCameraList().then(res => {
        this.tableDataAll = res.data
        this.page.total = this.tableDataAll.length
        this.tableData = pageData(this.page.total, this.page.pageSize, this.page.pageNum, this.tableDataAll)
      })
    }
  }
}
</script>

<style scoped>
/* 分页 */
.block{
    width: 100%;
    text-align:center;
    margin-top:20px;
  }
</style>