Javascript前端分页

这是我参与11月更文挑战的第7天,活动详情查看:2021最后一次更文挑战

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;
  let 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;
        let 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 };