环境配置

  1. 编译器:vscode
  2. 开发框架:vue3
  3. ui库:element-ui-plus

采用组件

table

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
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>

<script setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>

pagination

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[100, 200, 300, 400]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>

<script setup>
import { ref } from 'vue'
const total = ref(tableData.length)
const currentPage = ref(1);
const pageSize = ref(20);
</script>

方法1:直接向后端分页请求数据

这里需要后端写好一个分页接口。向后端携带这样的请求体即可

1
2
3
4
queryParams: {
pageNum: 1,
pageSize: 5,
},

在代码部分,只需要更改监听<el-pagination/>组件的currentPagepageSize发生变化时就再次向后端请求接口,再对返回数据再次重新渲染。

方法2:前端自行做分割

在这种情况下就是适用于下面这些情景:

  1. 一次性向后端请求全部数据
  2. 需要不断向后端请求请数据,然后添加已有数据末尾

首先,需要改写表格所展示的数据,这里不再直接将整个数组进行展示,而是将数据进行切片。

1
2
3
<el-table 
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
>

tableData 为数据数组,currentPage 当前在第几页的数据,pageSize 当前一页展示的数据量

<script setup></scrip> 里面同样对handleSizeChangehandleCurrentChange 两个方法进行定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script setup>
const total = ref(tableData.length)
const currentPage = ref(1);
const pageSize = ref(20);


//每页条数改变时触发 选择一页显示多少行
const handleSizeChange = (val) => {
console.log(`每页 ${val} 条`);
currentPage.value = 1;
pageSize.value = val;
}
//当前页改变时触发 跳转其他页
const handleCurrentChange = (val) => {
console.log(`当前页: ${val}`);
currentPage.value = val;
}
</script>