Javascript front page

This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

1, suitable for the situation

Front-end paging is typically used for small data volumes, with one request bringing all the data back from the back end.

2. Examples of front-end paging

Example front-end paging code

CD front-end-page Go to the front-end-page folder. NPM install runs on NPM run devCopy the code

3. Key to implementation

The obtained data is processed using computed attributes, the frontEndPageChange method in computed. In el-table :data binding frontEndPageChange.

<el-table
  :data="frontEndPageChange"
  stripe
  style="width: 1000px; margin:30px auto;"
  height="550"
>
</el-table>computed: {/ / computational attributes to deal with data 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); }Copy the code

4,vueComplete file code

<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="Date"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="Address"
          width="190"
        >
        </el-table-column>

        <el-table-column
          label="Personal Information"
          width="180"
          align="center"
        >
          <el-table-column
            prop="age"
            label="Age"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="height"
            label="Height"
            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>
// Data source
import { tableData } from './js/options';
export default {
  name: 'frontEndPage'.data() {
    return {
      msg: 'Front page'.paginationOptions: {
        currentPage: 1./ / the current page
        pageSize: 10.// Display the page count
        pageSizes: [10.20.30.40] // Optionally display an array of page numbers
      },
      tableData,
    }
  },
  computed: {
    // Compute attributes to process data
    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: {
    // Change the number of pages
    handleSizeChange(val) {
      this.paginationOptions.pageSize = val;
    },
    // Change the current page
    handlePageChange(val) {
      this.paginationOptions.currentPage = val; }}}</script>
Copy the code

5,options.jsData source file

/** * table header configuration */

const tableData = [
  {
    date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1510 jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-04'.name: 'Li Xiaohu'.address: Lane 1511, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-01'.name: 'Sun Xiaohu'.address: Lane 1512 jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-02'.name: 'Zhu Xiaohu'.address: Lane 1513, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-04'.name: Tiger money.address: Lane 1514, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-01'.name: 'Du Xiaohu'.address: Lane 1515, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-03'.name: 'Zhao Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-02'.name: 'Chen Xiaohu'.address: Lane 1510 jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-04'.name: 'Wu Xiaohu'.address: Lane 1511, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-01'.name: 'Xu Xiaohu'.address: Lane 1512 jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-02'.name: 'Yellow Tiger'.address: Lane 1513, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'
  },
  {
    date: '2016-05-04'.name: 'Qin Xiaohu'.address: Lane 1514, Jinshajiang Road, Putuo District, Shanghai.age: 18.height: '180cm'}];export { tableData };
Copy the code