vue2项目--基于elementUI 实现分页表格序号累加

前言

Vue项目借助elementUI开发后台管理系统时，遇到的一个需求，就是每页展示5条数据，数据序号为1-5，下一页就需要从6开始，以此类推。那么序号递增该如何实现呢？

分析

1. 最初想法是通过计算当前页码和每页条数，来计算出起始序号。但这种方式不够通用，因为每页条数可能不同，起始序号也可能不是从1开始。
2. 后来想到，可以通过在数据中添加一个序号字段，然后在渲染表格时，直接将序号字段的值显示出来。这种方式比较通用，也比较简单。

实现

1. 添加序号字段

在数据中添加一个序号字段，字段名可以是序号、index等。

[
  {
    id: 1,
    name: '张三',
    age: 20,
    序号: 1
  },
  {
    id: 2,
    name: '李四',
    age: 21,
    序号: 2
  },
  {
    id: 3,
    name: '王五',
    age: 22,
    序号: 3
  }
]

2. 渲染表格

在渲染表格时，直接将序号字段的值显示出来。

<el-table :data="tableData">
  <el-table-column prop="序号" label="序号"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

3. 实现序号累加

为了实现序号累加，需要在分页组件中添加一个变量currentPageIndex，该变量表示当前页码。在数据加载完成后，需要将currentPageIndex的值更新为当前页码。

export default {
  data() {
    return {
      currentPageIndex: 1,
      tableData: []
    }
  },
  methods: {
    // 获取数据
    getData() {
      this.axios.get('/api/data').then(res => {
        this.tableData = res.data.data
      })
    },
    // 分页改变时触发
    handleCurrentChange(currentPageIndex) {
      this.currentPageIndex = currentPageIndex
      this.getData()
    }
  },
  mounted() {
    this.getData()
  }
}

在渲染表格时，需要将currentPageIndex的值乘以每页条数，然后加上序号字段的值，即可得到累加后的序号。

<el-table :data="tableData">
  <el-table-column prop="序号" label="序号" :formatter="formatIndex"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

methods: {
  // 格式化序号
  formatIndex(row, index) {
    return this.currentPageIndex * this.pageSize + index + 1
  }
}

这样，就实现了表格数据的序号累加功能。

总结

本文介绍了如何使用ElementUI实现表格数据的序号累加功能。该方法简单易用，可满足大多数表格的序号累加需求。