前端分页功能

前言

在开发过程中总会遇到分页情况，但是如果后端同学懒得做，需要我们前端做，那该怎么做呢，那么我们使用elementui来实现属于前端的分页功能👇👇👇

思路分析

首先就是需要把所有数据全部获取过来，保存到本地变量中，这样才可以对数据进行分页，我们采用的是elementui的分页组件，因为获取过来的数据是数组类型的，所以可以使用数据的slice方法进行实现，为什么不用splice呢，因为splice会改变原有数据的数据,这样会导致每次分页都会改变原有数据

代码实现

<template>
	// 表格
	<el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="26" />
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="names" label="姓名" width="80"  />
                <el-table-column prop="sex" label="性别" width="50">
    </el-table>
    // 分页器
	<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
		:page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script setup>
import { onMounted} from 'vue';

// 页面加载的时候获取原始数据并做判断分页
const testData = ref() // 数据暂存
const tableData = ref() // 表格数据
const currentPage = ref(1) // 当前第1页
const pageSize = ref(10) // 每页10条
const total = ref() // 总条数

onMounted(async () => {
    const res = await getResume() // 获取数据的接口
    total.value = res.length // 获取总条数
    testData.value = res // 把获取过来的数据暂存到testData中
    // 判断当前的每页条数和获取的数据的总数做相应的选择
    if (res.length > pageSize.value) {
        // 如果总条数大于当前每页条数，使用slice进行切割，吧数据复制给tableData渲染
     	tableData.value = testData.value.slice(0, pageSize4.value)
    } else {
        tableData.value = testData.value 
    }
})



// 每页多少条数据
const handleSizeChange = (val) => {
	// 当点击每页多少条数据的时候，让从 当前页数-1 × 每页条数 得到起始位置 ，当前页数-1 × 每页条数+每页条数 得到切割多少条数据
    tableData.value = testData.value.slice((currentPage.value - 1) * pageSize.value, (currentPage.value - 1) * pageSize.value + val)
    // console.log((currentPage4.value - 1) * pageSize4.value);
    // console.log((currentPage4.value - 1) * pageSize4.value + val);
}
// 点击按钮当前第几页
const handleCurrentChange = (val) => {
	// 当点击按钮的时候，让从 当前页数-1 × 每页条数 得到起始位置 ，当前页数-1 × 每页条数+每页条数 得到切割多少条数据
    tableData.value = testData.value.slice((val - 1) * pageSize.value, (val - 1) * pageSize.value + pageSize.value)
    // console.log((val - 1) * pageSize4.value);
    // console.log((val - 1) * pageSize4.value + pageSize4.value);
}


</script>