título del directorio
Escenario del proyecto:
La paginación también es una existencia muy común en nuestras aplicaciones prácticas. De hecho, la paginación en sí misma es muy buena en elementos, pero se usa mucho, por lo que es necesario encapsularla, principalmente para reducir la redundancia de código y mejorar la eficiencia del desarrollo. y reducir el costo del mantenimiento posterior.
Comprender la paginación
Aquí hay un ejemplo de una paginación normal.
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${
val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${
val}`);
}
},
data() {
return {
currentPage: 4
};
}
}
</script>
el efecto es asi
Entre ellos, se utilizan siete campos que usamos comúnmente:
1.página actual
:current-page="currentPage"
Representa la página actual, y puede ingresar cualquier número de página existente para saltar. Los efectos principales son los siguientes:
2.tamaños de página
:page-sizes="[100, 200, 300, 400]"
Se utiliza para establecer cuántos elementos se muestran por página. Los efectos principales son los siguientes:
3. tamaño de página
:page-size="100"
Establezca cuántos elementos se muestran de forma predeterminada (aquí el valor predeterminado es 100), los efectos principales son los siguientes:
4.diseño
layout="total, sizes, prev, pager, next, jumper"
Se utiliza para establecer el diseño del componente, y los nombres de los subcomponentes están separados por comas, el efecto es el siguiente:
Descripción del campo:
- total : el número total de páginas
- tamaños: cuántos elementos se muestran en una página
- anterior: página anterior
- buscapersonas: haga clic en el número de página para saltar (solo permite saltar a las páginas superior e inferior y a las páginas de inicio y final)
- siguiente: página siguiente
- jumper: Ingrese para saltar a cualquier página existente
5.total
:total="400"
Muestra el número total de páginas, el efecto es el siguiente.
6.cambio de tamaño
@size-change="handleSizeChange"
Activar un evento, que se activa cuando cambia el tamaño de la página, es decir, cuando cambia la página.
7.cambio de corriente
@current-change="handleCurrentChange"
Trigger event, se activará cuando cambie la página actual, es decir, se activará cuando se modifique el número de elementos que se muestran en cada página.
Paginación del paquete:
Después de averiguar el significado de cada campo, se puede encapsular.
La idea principal es que el componente encapsulado pasa página actual, total, tamaños, buscapersonas, puente a través del componente principal, y cuando se activan los eventos @size-change, @current-change, la información del evento se pasa al componente principal.
Crear paginación:
Encapsular
<!--
author:Wh1T3ZzT
component:分页
time:2023/07/25
-->
<template>
<div class="paging">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
}
},
props:{
currentPage:{
default(){
return [];
}
},
pageSizes:{
default(){
return [];
}
},
pageSize:{
default(){
return [];
}
},
layout:{
default(){
return [];
}
},
total:{
default(){
return [];
}
}
},
methods:{
handleSizeChange(val) {
this.$emit('handleSizeChange',val)
console.log(`传给父组件：每页 ${
val} 条`);
},
handleCurrentChange(val) {
this.$emit('handleCurrentChange',val)
console.log(`传给父组件：当前页: ${
val}`);
},
}
}
</script>
<style>
</style>
¡El embalaje está completo!
Usar en la página:
introducir
<template>
<div>
<Paging
:currentPage="1"
:pageSizes="[5,10,20,50,100]"
:pageSize="10"
layout="total, sizes, prev, pager, next, jumper"
:total="10"
@handleSizeChange="PagingSizeChange"
@handleCurrentChange="PagingCurrentChange"
></Paging>
</div>
</template>
<script>
import Paging from '@/components/paging/index.vue'
export default {
methods:{
PagingSizeChange(val){
console.log(`父组件接收到每页: ${
val} 条`);
},
PagingCurrentChange(val){
console.log(`父组件接收到当前页: ${
val}`);
},
}
}
</script>
Efecto
¡éxito!