Element Plus 表格分页、序号与请求状态整理

Sat, 07 Feb 2026 00:00:00 +0000

列表页是后台项目最常见的页面之一。表格、分页、筛选、加载状态一起出现后，问题往往不是“表格能不能显示”，而是换页后序号不连续、重复请求、页码没有重置，或者前端排序和服务端分页混在一起。

跨页连续序号怎么算

el-table-column 的 type="index" 默认会从 1 开始重新编号。要显示跨页连续序号，可以给它传一个函数：

1

<el-table-column type="index" label="序号" :index="getIndex" width="72" />

1
2
3


const getIndex = (index: number) => {
 return (currentPage.value - 1) * pageSize.value + index + 1
}

例如当前是第 3 页、每页 20 条，当前页第一行的 index 是 0，最终序号就是 41。

一个可复用的分页列表

下面的例子把页码、每页数量、总数和加载状态放在一起管理。筛选条件变化后回到第 1 页，再重新请求数据。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77


<script setup lang="ts">
import { onMounted, ref } from 'vue'

interface User {
 id: number
 name: string
 status: 'enabled' | 'disabled'
}

const rows = ref<User[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const keyword = ref('')
const loading = ref(false)

const getIndex = (index: number) => {
 return (currentPage.value - 1) * pageSize.value + index + 1
}

const loadUsers = async () => {
 loading.value = true

 try {
 const params = new URLSearchParams({
 page: String(currentPage.value),
 pageSize: String(pageSize.value),
 keyword: keyword.value,
 })
 const response = await fetch(`/api/users?${params}`)
 const data = await response.json()

 rows.value = data.list
 total.value = data.total
 } finally {
 loading.value = false
 }
}

const search = () => {
 currentPage.value = 1
 loadUsers()
}

const changePageSize = () => {
 currentPage.value = 1
 loadUsers()
}

onMounted(loadUsers)
</script>

<template>
 <el-input
 v-model="keyword"
 clearable
 placeholder="按用户名搜索"
 @keyup.enter="search"
 />

 <el-table v-loading="loading" :data="rows" row-key="id">
 <el-table-column type="index" label="序号" :index="getIndex" width="72" />
 <el-table-column prop="name" label="用户名" min-width="160" />
 <el-table-column prop="status" label="状态" width="120" />
 </el-table>

 <el-pagination
 v-model:current-page="currentPage"
 v-model:page-size="pageSize"
 :page-sizes="[10, 20, 50, 100]"
 :total="total"
 background
 layout="total, sizes, prev, pager, next"
 @current-change="loadUsers"
 @size-change="changePageSize"
 />
</template>

loading 要在 finally 中关闭。无论请求成功还是失败，页面都不会一直停在加载状态。

筛选后为什么要重置页码

用户本来在第 8 页，搜索条件一变，新的结果可能只有 1 页。如果继续带着第 8 页请求，列表就会空掉。因此所有会改变结果集的筛选项，都应该先执行：

1
2


currentPage.value = 1
loadUsers()

服务端分页时，排序也交给服务端

如果表格数据来自分页接口，前端只拿到当前页的 20 条数据。此时直接在前端对这 20 条排序，得到的并不是全量排序结果。

可以监听 sort-change，把字段名和顺序传回接口：

1
2
3


<el-table @sort-change="handleSortChange">
 <el-table-column prop="createdAt" label="创建时间" sortable="custom" />
</el-table>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const sortBy = ref('createdAt')
const sortOrder = ref<'ascending' | 'descending' | ''>('descending')

const handleSortChange = ({ prop, order }: {
 prop: string
 order: 'ascending' | 'descending' | null
}) => {
 sortBy.value = prop
 sortOrder.value = order ?? ''
 currentPage.value = 1
 loadUsers()
}

小结

表格页真正需要统一管理的是请求参数和页面状态：页码、每页数量、筛选条件、排序条件、总数与加载状态。把这些状态放在同一处后，分页和表格才不会各自运行、互相打架。

El-Table on 404_@林达

Element Plus 表格分页、序号与请求状态整理

跨页连续序号怎么算

一个可复用的分页列表

筛选后为什么要重置页码

服务端分页时，排序也交给服务端

小结