Javascript前端分页

1、适合情形

前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。

2、前端分页例子

前端分页代码示例

cd front-end-page                   进入front-end-page 文件夹下

npm install                         安装依赖

npm run dev                         运行

3、实现关键

使用计算属性对获取的数据进行处理，即computed中frontEndPageChange方法。el-table中的:data绑定frontEndPageChange。

<el-table
  :data="frontEndPageChange"
  stripe
  style="width: 1000px;margin:30px auto;"
  height="550"
>
</el-table>

computed: {
// 计算属性对数据进行处理
frontEndPageChange() {
  let start = (this.paginationOptions.currentPage - 1) * this.paginationOptions.pageSize;
  if (start >= this.tableData.length) start = 0;
  const end = this.paginationOptions.currentPage * this.paginationOptions.pageSize;
  if (end >= this.tableData.length) end = this.tableData.length;
  return this.tableData.slice(start, end);
}

4、vue 文件完整代码

<template>
  <div class="hello">
    {{msg}}
    <div>
      <el-table
        :data="frontEndPageChange"
        stripe
        style="width: 1000px;margin:30px auto;"
        height="550"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="190"
        >
        </el-table-column>

        <el-table-column
          label="个人信息"
          width="180"
          align="center"
        >
          <el-table-column
            prop="age"
            label="年龄"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="height"
            label="身高"
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            class="z-pagination"
            :current-page="paginationOptions.currentPage"
            :page-size="paginationOptions.pageSize"
            :page-sizes="paginationOptions.pageSizes"
            layout="sizes, prev, pager, next, jumper,total"
            :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 数据来源
import { tableData } from './js/options';
export default {
  name: 'frontEndPage',
  data() {
    return {
      msg: '前端分页',
      paginationOptions: {
        currentPage: 1, // 当前页
        pageSize: 10, // 展示页数
        pageSizes: [10, 20, 30, 40] // 可选择展示页数 数组
      },
      tableData,
    }
  },
  computed: {
    // 计算属性对数据进行处理
    frontEndPageChange() {
      let start = (this.paginationOptions.currentPage - 1) * this.paginationOptions.pageSize;
      if (start >= this.tableData.length) start = 0;
      const end = this.paginationOptions.currentPage * this.paginationOptions.pageSize;
      if (end >= this.tableData.length) end = this.tableData.length;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    // 改变分页数量
    handleSizeChange(val) {
      this.paginationOptions.pageSize = val;
    },
    // 改变当前页
    handlePageChange(val) {
      this.paginationOptions.currentPage = val;
    }
  }
}
</script>

5、options.js 数据来源文件

/**
 * 表头配置
 */

const tableData = [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1510 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-04",
    name: "李小虎",
    address: "上海市普陀区金沙江路 1511 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-01",
    name: "孙小虎",
    address: "上海市普陀区金沙江路 1512 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-02",
    name: "朱小虎",
    address: "上海市普陀区金沙江路 1513 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-04",
    name: "钱小虎",
    address: "上海市普陀区金沙江路 1514 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-01",
    name: "杜小虎",
    address: "上海市普陀区金沙江路 1515 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-03",
    name: "赵小虎",
    address: "上海市普陀区金沙江路 1516 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-02",
    name: "陈小虎",
    address: "上海市普陀区金沙江路 1510 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-04",
    name: "吴小虎",
    address: "上海市普陀区金沙江路 1511 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-01",
    name: "徐小虎",
    address: "上海市普陀区金沙江路 1512 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-02",
    name: "黄小虎",
    address: "上海市普陀区金沙江路 1513 弄",
    age: 18,
    height: "180cm",
  },
  {
    date: "2016-05-04",
    name: "秦小虎",
    address: "上海市普陀区金沙江路 1514 弄",
    age: 18,
    height: "180cm",
  },
];
export { tableData };