Recently, there is a project that needs to use the paging component, but the content is not a table, so I studied it myself and wrote the paging on the basis of the Pagination paging component.
Renderings:
Table of contents
2. Then encapsulate a function for later calling
3. Then use Pagination to control the previous and next pages
4. Then you can call which function in the current-change event
The principle is similar to the use of the Pagination paging component, just pass in the corresponding parameters to the corresponding place.
The difference is that to switch the corresponding page number, you need to write a function by yourself and then call it.
1. First declare a few variables to define the page number, the number of items per page, and the total number of pages.
2. Then encapsulate a function for later calling
The letter a represents the first page
The letter b represents how many pieces of data per page
3. Then use Pagination to control the previous and next pages
4. Then you can call which function in the current-change event
| current-change | current-pagefires on change |
One thing to pay attention to in this place is to clear the data before each call, otherwise the previous data will still be under it.
// 分页
const value = ref('');
const handleCurrentChange = (val) => {
tableArr.value = [];
pageNum.value = val;
amount(pageNum.value, selecctNum.value);
};Here is the whole code:
<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"
small
background
layout="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>