Vue项目中使用elementUI，如何让表格数据序号自动累加？

2023-11-19 02:34:54

前言

在Vue项目中使用elementUI开发后台管理系统时，我们经常会遇到需要在表格中显示数据并对数据进行分页的需求。此时，我们就需要使用elementUI提供的分页组件来实现这些功能。然而，在使用分页组件时，我们可能会遇到一个问题：当我们切换到下一页时，表格数据序号会从1重新开始计数，而不是从上一页的最后一个序号继续累加。这可能会导致数据序号混乱，给用户带来不好的体验。

实现原理

要实现表格数据序号的自动累加，我们需要使用elementUI提供的API来获取当前页面的序号。然后，我们将这个序号与上一页的最后一个序号相加，得到当前页面的第一个序号。最后，我们将这个序号作为当前页面的第一个数据序号，并以此类推，将序号累加到最后一页。

步骤详解

首先，我们需要在Vue项目中安装elementUI。
然后，我们在需要使用表格的地方引入elementUI的分页组件和表格组件。
在组件中，我们使用elementUI提供的API来获取当前页面的序号。
接下来，我们将这个序号与上一页的最后一个序号相加，得到当前页面的第一个序号。
最后，我们将这个序号作为当前页面的第一个数据序号，并以此类推，将序号累加到最后一页。

示例代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>

  <el-pagination
    @current-change="handleCurrentChange"
    :page-size="5"
    layout="prev, pager, next"
    :total="tableData.length"
  ></el-pagination>
</template>

<script>
import { ref } from 'vue'
import { ElTable, ElTableColumn, ElPagination } from 'element-ui'

export default {
  components: { ElTable, ElTableColumn, ElPagination },
  setup() {
    const tableData = ref([
      { name: 'John Doe', age: 30, address: '123 Main Street' },
      { name: 'Jane Smith', age: 25, address: '456 Elm Street' },
      { name: 'Michael Jones', age: 35, address: '789 Oak Street' },
      { name: 'Sarah Miller', age: 40, address: '1010 Pine Street' },
      { name: 'William Johnson', age: 45, address: '1111 Cedar Street' },
    ])

    const currentPage = ref(1)

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    return {
      tableData,
      currentPage,
      handleCurrentChange,
    }
  },
}
</script>