vue3+ts+element 前端实现分页

	
			
			
			
			
			
			
				
			
		
		 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const pageable = ref({
	pageNum: 1,
	pageSize: 25,
	total: 0
});
const userList = ref([]);
for (let i = 0; i < 1005; i++) {
  if (i % 10 == 0) {
    userList.value.push({ id: i + 1, b: "sb", c: "" });
  } else {
    userList.value.push({ id: i + 1, b: "sb", c: "13321618542" });
  }
}
//总记录数等于数组的长度
total.value = userList.value.length;
const spliceArr = (list: any, length: any) => {
	let arr = Object.assign([], list);
	let index = 0;
	let newArray = [];
	while (index < arr.length) {
		newArray.push(arr.splice(index, length));
	}
	return newArray;
};

//根据pageSize切割数组成n等分
let tableData = ref(spliceArr(userList.value, pageable.value.pageSize));
const handleSizeChange = (val: number) => {
	pageable.value.pageSize = val;
	tableData.value = spliceArr(userList.value, pageable.value.pageSize);
};

//切换当前页
const handleCurrentChange = (val: number) => {
	pageable.value.pageNum = val;

};
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