Vue3手写分页在分页的基础上用到Pagination 分页组件

     近期有个项目要用到分页组件，但是内容不是表格，所以自己就研究了一下在Pagination 分页组件的基础上手写了分页

效果图：

目录

一、先声明几个变量用来定义第几页，每页多少条，总页数。

二、然后封装一个函数方便以后调用

三、 然后就使用到Pagination 分页来控制上一页和下一页

四、然后在 current-change事件去调用哪个函数就可以了

---

原理跟 Pagination 分页组件使用差不多把对应的参数传入到相应的地方就可以。

不同之处切换对应的页数需要自己去手写一个函数然后再去调用它。

一、先声明几个变量用来定义第几页，每页多少条，总页数。

二、然后封装一个函数方便以后调用

字母 a 代表第一页

字母 b 代表每页多少条数据

三、 然后就使用到Pagination 分页来控制上一页和下一页

四、然后在 current-change事件去调用哪个函数就可以了

current-change

current-page 改变时触发

 在这个地方要注意一点就是每次调用前要给数据清空一下，不然会前一条数据还在后一条数在它下面。

  // 分页const value = ref('');const handleCurrentChange = (val) => {tableArr.value = [];pageNum.value = val;amount(pageNum.value, selecctNum.value);};

下面是整个代码：

<template>  <div class="content"><div class="box" v-for="(item, index) in tableArr" :key="item.id"><div class="under2" v-if="showCss[index]"></div><div class="content_box"><p class="xxgy">学员感言</p><p class="say">明月几时有</p><div class="for_btn"><img src="../../assets/student_img/a1.png" alt="" /></div><div class="students"><div class="students_box_mame"><div class="name"> 姓名： </div><div class="names">{{ item.name }}</div></div><div class="students_box_mame"><div class="name"> 薪资： </div><div class="names">{{ item.pay }}</div></div><div class="entry"><div class="name">入职：</div><div class="names">{{ item.company }}</div></div></div></div></div></div><div class="pages"><el-pagination:current-page="pageNum"smallbackgroundlayout="prev, pager, next,jumper":total="totalNum"class="mt-4":page-size="selecctNum"@current-change="handleCurrentChange"/></div>
</template><script setup>import { ref, reactive, onMounted } from 'vue';// 分页const value = ref('');const handleCurrentChange = (val) => {tableArr.value = [];pageNum.value = val;amount(pageNum.value, selecctNum.value);};
let list_content = [{id: 1,name: '测试1',pay: '13k',company: '腾讯有限公司',},{id: 2,name: '测试2',pay: '15k',company: '支付宝有限公司',},{id: 3,name: '测试3',pay: '14k',company: '上海科技有限公司',},{id: 4,name: '测试4',pay: '13k',company: '江苏科技有限公司',},{id: 5,name: '测试5',pay: '13k',company: '天津有限公司',},{id: 6,name: '测试6',pay: '12k',company: '北京有限公司',},{id: 7,name: '测试7',pay: '16k',company: '深圳有限公司',},{id: 8,name: '测试8',pay: '16k',company: '深圳有限公司',},{id: 9,name: '测试9',pay: '16k',company: '深圳有限公司',},{id: 10,name: '测试10',pay: '16k',company: '深圳有限公司',},{id: 11,name: '测试11',pay: '16k',company: '深圳有限公司',},{id: 12,name: '测试12',pay: '16k',company: '深圳有限公司',},{id: 13,name: '测试13',pay: '16k',company: '深圳有限公司',},{id: 14,name: '测试14',pay: '16k',company: '深圳有限公司',},{id: 15,name: '测试15',pay: '16k',company: '深圳有限公司',},{id: 16,name: '测试16',pay: '16k',company: '深圳有限公司',},{id: 17,name: '测试17',pay: '16k',company: '深圳有限公司',},{id: 18,name: '测试18',pay: '16k',company: '深圳有限公司',},{id: 19,name: '测试19',pay: '16k',company: '深圳有限公司',},{id: 20,name: '测试20',pay: '16k',company: '深圳有限公司',},];const tableArr = ref([]);// 第一页const pageNum = ref(1);// 每页多少条const selecctNum = ref(10);// 总页数const totalNum = list_content.length;// 分页处理事件const amount = (a, b) => {tableArr.value = [];let c = (a - 1) * b;if (list_content.length < a * b) {for (let i = c; i < list_content.length; i++) {tableArr.value.push(list_content[i]);}} else {if (a * b > list_content.length) {for (let i = c; i < list_content.length; i++) {tableArr.value.push(list_content[i]);}} else {for (let i = c; i < a * b; i++) {tableArr.value.push(list_content[i]);}}}};amount(pageNum.value, selecctNum.value);
</script>