Directorio de artículos
Existe tal escenario, los datos de la lista de la interfaz de back-end no están paginados para mí, lo que equivale a devolver todos los datos de la lista directamente, por ejemplo, si hay 100 elementos, devolverá 100, pero el frente- la pantalla final debe paginarse, por ejemplo, 10 elementos son una página.
1. Cómo usar elementUI+vue para realizar la paginación frontal
Si usa vue para lograrlo, la idea es cortar los datos y mostrarlos en lotes.
Por lo tanto, puede usar computedpropiedades y v-fordirectivas calculadas para implementar la paginación de front-end.
Debido a que los datos que le devuelve el backend generalmente se almacenan en una matriz. Para mostrar la primera página, en realidad es para dividir y extraer los elementos de datos con subíndices 0-9 en la matriz. Si es la tercera página, entonces Extraer los elementos de datos del 20 al 29 en la matriz, cree un atributo calculado, complete la extracción de datos en el atributo calculado y luego páselo a la vista.
Si necesito un elementUIcomponente de paginación combinado, ¿cómo puedo lograrlo? El siguiente es el método de implementación, que tiene el mismo efecto que la paginación dada por el backend.
<!--这里的paginatedData就是根据list进行切割的计算属性-->
<el-table :data="paginatedData" border style="width: 100%">
<el-table-column type="index" label="序号" :index="indexMethod" width="60" header-align="center" align="center"> </el-table-column>
<el-table-column prop="customerName" label="客户名称" min-width="130"> </el-table-column>
<el-table-column prop="chainName" label="业务名称" min-width="120"> </el-table-column>
<el-table-column prop="statisticsPeriod" label="统计周期" min-width="80"> </el-table-column>
<el-table-column prop="dateCycle" label="时间周期" min-width="150"> </el-table-column>
</el-table>
<!--这里的pagination分页组件不需要做任何改动-->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"> </el-pagination>
</div>
<script>
export default {
data() {
return {
list: [] //后端接口给的列表数据（未分页，全部返回）
}
},
created() {
//请求后端数据
this.getList();
},
computed: {
// 使用前端实现分页的计算数据
paginatedData() {
// 分页的起始下标
const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
// 分页的末尾下标
const endIndex = startIndex + this.listQuery.pageNum;
// 返回切割后的数据
return this.list.slice(startIndex, endIndex);
},
// 总条数
totalNum() {
return this.list.length;
},
// 总分页数
total() {
return Math.ceil(this.list.length / this.listQuery.pageNum);
}
},
methods:{
//数据
getList() {
//调用后端接口
staticsList().then((res) => {
this.list = res.data;
});
},
// 每页列表数
handleSizeChange(val) {
this.listQuery.pageNum = val;
},
// 当前分页数（第几页）
handleCurrentChange(val) {
this.listQuery.page = val;
},
}
}
</script>
De esta manera, se puede realizar la paginación frontal.
2. Código general de paginación frontal
Si no usa elementUIun marco en su proyecto, en realidad es fácil de manejar. Lo principal es recordar la idea anterior de paginación frontal: encuentre el subíndice inicial y el subíndice final de una página determinada, luego divida el matriz y devolverlo a la vista.
Aquí hay un código de muestra:
<template>
<div>
<ul v-for="item in paginatedData" :key="item.id">
<!-- 显示需要显示的数据 -->
<li>{
{item.name}}</li>
</ul>
<div>
<!-- 显示分页控件 -->
<button v-for="pageNumber in totalPages" :key="pageNumber" @click="currentPage = pageNumber">
{
{ pageNumber }}
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [], // 假如这里就是你通过接口获取到的所有的数据（未分页）
itemsPerPage: 10, // 每页显示的数据量
currentPage: 1 // 当前页码
};
},
computed: {
paginatedData() {
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return this.data.slice(startIndex, endIndex);
},
totalPages() {
return Math.ceil(this.data.length / this.itemsPerPage);
}
}
};
</script>
En este ejemplo, usamos v-forel comando para recorrer los datos que se mostrarán en cada página y usamos slice()el método para obtener los datos correspondientes al número de página actual. También calculamos el número total de páginas para que todos los números de página se muestren en el control de paginación.
En la plantilla, usamos v-forel comando para recorrer los datos que se mostrarán en cada página y usamos el comando en el control de paginación v-forpara mostrar todos los números de página. Vinculamos un clickevento a cada botón de número de página, que actualizará el número de página actual cuando se haga clic en el botón.
Si tiene dificultades en el desarrollo web front-end, entrevistas y rutas de aprendizaje front-end, puede agregarme V: imqdcnn. Responda preguntas de forma gratuita, y los expertos técnicos que han estado involucrados en la industria durante muchos años lo ayudarán a resolver errores.
¡Deseo que puedas convertirte en un excelente ingeniero de desarrollo front-end WEB!