饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤

正常情况下，在一个后台管理系统中，都会有勾选选中功能，也都会有翻页功能。本文记录一下，比较常见的翻页勾选保留功能和翻页序号递增功能的实现方式

翻页勾选保留功能

第一步和第二步

<template>
  <div id="box">
    <!-- 
      第二步：指定一个key去确认标识这一行的数据，因为若要翻页保留，就需要确认保留的数据是哪一个，
             所以我们就给每一行确定个独一无二的身份标识，这里我们在el-table标签上
             使用row-key去得到每一行的身份标识
     -->
    <el-table
      :row-key="getRowKey"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 
        第一步：开启选中翻页保留模式 即：:reserve-selection="true" 
               默认是false。即 默认选中翻页不保留之前勾选的数据
      -->
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="home" label="家乡住址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

第三步

methods: {
 /*
      第三步，一般我们都是用id作为每一行数据的特殊标识，所以这里返回的是row下面的id作为标识。当然
             这里不return row下面的id也行，只要能够确保某个字段是独一无二的，不会重复的，就可return
             return row下面的这个字段也是可以的
    */
    getRowKey(row) {
      console.log("看看每一行的数据", row);
      return row.id;
    },
  }

翻页序号递增功能

翻页序号递增功能不像翻页勾选保留功能那样还需要每一条数据做标识，而是通过计算得出来的。

第一步

<!-- 序号列：index绑定计算方法indexMethod
 -->
  <el-table-column
    :index="indexMethod"
    label="序号"
    type="index"
    width="50"
    fixed
  >
  </el-table-column>

第二步

methods: {
  // 序号翻页递增
    indexMethod(index) {
      console.log('索引数下标',index)
      let nowPage = this.tablePages.pageIndex; //当前第几页，根据组件取值即可
      let nowLimit = this.tablePages.pageSize; //当前每页显示几条，根据组件取值即可
      return index + 1 + (nowPage - 1) * nowLimit ; // 这里可以理解成一个公式
    },
  }

好记性不如烂笔头