Recientemente, hay un proyecto que necesita usar el componente de paginación, pero el contenido no es una tabla, así que lo estudié yo mismo y escribí la paginación sobre la base del componente de paginación Paginación .
Representaciones:
Tabla de contenido
2. Luego encapsule una función para llamarla más tarde
3. Luego use Paginación para controlar las páginas anteriores y siguientes
4. Luego puede llamar a qué función en el evento de cambio actual
El principio es similar al uso del componente de paginación Paginación, simplemente pase los parámetros correspondientes al lugar correspondiente.
La diferencia es que para cambiar el número de página correspondiente, debe escribir una función usted mismo y luego llamarla.
1. Primero declare algunas variables para definir el número de página, el número de elementos por página y el número total de páginas.
2. Luego encapsule una función para llamarla más tarde
La letra a representa la primera página.
La letra b representa cuántos datos por página
3. Luego use Paginación para controlar las páginas anteriores y siguientes
4. Luego puede llamar a qué función en el evento de cambio actual
| cambio de corriente | current-pageincendios en el cambio |
Una cosa a la que debe prestar atención en este lugar es borrar los datos antes de cada llamada, de lo contrario, los datos anteriores seguirán estando debajo.
// 分页
const value = ref('');
const handleCurrentChange = (val) => {
tableArr.value = [];
pageNum.value = val;
amount(pageNum.value, selecctNum.value);
};Aquí está el código completo:
<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>