elementUI分页组件实现表格数据序号累加功能

---

前言

Vue项目借助elementUI开发后台管理系统时，遇到的一个需求，就是每页展示5条数据，数据序号为1-5，下一页就需要从6开始，以此类推…一起来看看如何实现吧~

---

一、基本结构

使用elementUI提供的表格组件和分页组件

• 表格组件
  序号那一列将type设置为index,可以让这一列内容按照索引排序，
  索引+1即为第几条数据。
  可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

• 分页组件
  监听size-change,可以得到当前选择的每页展示条数
  监听current-change,可以得到当前点击的第几页
  :index传入一个方法，可以得到当前的索引

代码如下（示例）：

<template>
  <div>
  	<!-- 表格组件 -->
    <el-table :data="list" stripe style="width: 100%;">
      <el-table-column label="序号" type