Under normal circumstances, in a background management system, there will be selected function, there will be page-turning function. This paper records the realization steps of the more common page-turning reservation function and page-turning serial number increasing function

Turn the page and select the reserved function

Step one and step two

<template>
  <div id="box">
    <! Select * from el table where row key is used to identify row id. Select * from el table where row key is used to identify row id. Select * from EL table where row key is used.
    <el-table
      :row-key="getRowKey"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <! Reserve-selection ="true" the default is false. That is, the default page turning option does not retain the previously selected data -->
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column prop="name" label="Name" width="120"> </el-table-column>
      <el-table-column prop="age" label="Age" width="120"> </el-table-column>
      <el-table-column prop="home" label="Home address" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
Copy the code

The third step

methods: {
 /* The id below the row is the id below the row. Return id */; return id */
    getRowKey(row) {
      console.log("Look at each row of data.", row);
      returnrow.id; }},Copy the code

Page turning sequence number increment function

The function of increasing the number of page turns is not identified by each piece of data like the function of selecting and reserving page turns, but obtained by calculation.

The first step

<! IndexMethod --><el-table-column
    :index="indexMethod"
    label="Serial number"
    type="index"
    width="50"
    fixed
  >
  </el-table-column>
Copy the code

The second step

methods: {
  // Sequence number page turn increment
    indexMethod(index) {
      console.log('Index subscript',index)
      let nowPage = this.tablePages.pageIndex; // The current page, depending on the component value
      let nowLimit = this.tablePages.pageSize; // Currently, several entries are displayed on each page, depending on the component value
      return index + 1 + (nowPage - 1) * nowLimit ; // This can be interpreted as a formula}},Copy the code

A good memory is better than a bad pen. Write it down