前言

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="index" :index="hIndex">
      </el-table-column>
      <el-table-column label="姓名" prop="username">
      </el-table-column>
      <el-table-column label="生日" prop="birthday">
      </el-table-column>
    </el-table>

	<!-- 分页组件 -->
	<el-pagination
      :page-sizes="[5,10,15]"
      :current-page.sync="page"
      :page-size="pagesize"
      @size-change="hSizeChange"
      @current-change="hCurrentChange"
      layout="sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data (){
  	list: [], // 表格数据列表
    page: 1, // 第几页
    pagesize: 5 // 每页几条
  },
  created (){
    // 这里发送Ajax请求拿到表格数据，省略...
  },
  methods: {
  	// 改变每页展示条数
    hSizeChange (val){
      // 把点击后得到的数值保存起来
      this.pagesize = val
      // 向后台发送Ajax请求，省略...
    },
    // 改变当前第几页
    hCurrentChange (val){
      // 把点击的页码赋值给data中的数据
      this.page = val
      // 向后台发送Ajax请求，省略...
    },
    // 
    hIndex (index){
      // index索引从零开始，index +1即为当前数据序号
	  this.page <= 0 ? this.page = 1 : this.page
	  // 如果当前不是第一页数据
	  if(this.page != 1) {
	  	// index + 1 + (( 当前页 - 1) * 每页展示条数)
	  	// 比如是第二页数据 1 + ((2 - 1)*5) = 6,第二页数据也就是从序号6开始
	  	return index + 1 + ((this.page - 1) * this.pagesize)
	  }
	  // 否则直接返回索引+1作为序号
	  return index + 1
    }
  }
}
</script>

二、效果预览

在这里插入图片描述切换至第二页可以看到序号已经按需求展示了

总结

需求已实现，掰掰~

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

前言

一、基本结构

二、效果预览

总结