环境配置

  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
34
35
36
37
38
39
40
41
42
43
<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
<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/>组件的currentPage和pageSize发生变化时就再次向后端请求接口，再对返回数据再次重新渲染。

方法 2：前端自行做分割

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

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

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

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

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

在<script setup></scrip> 里面同样对handleSizeChange和handleCurrentChange 两个方法进行定义

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>