Cómo usar la paginación de elementos

El componente de paginación de Element UI es muy conveniente y práctico, solo necesita introducir el componente en la página y pasar los parámetros de paginación correspondientes.

1. Importar componentes

Primero, debe introducir el componente de paginación en la página  el-pagination, que se puede lograr con el siguiente código:

<template>
   <div>
     <!-- 分页组件的使用，以下为基本使用示例 -->
     <el-pagination
       :current-page="currentPage"
       :page-size="pageSize"
       :total="total"
       @current-change="handleCurrentChange">
     </el-pagination>
   </div>
</template>

<script>
// 引入 Element 组件库
import { Pagination } from 'element-ui';

// 注册组件
export default {
   components: {
     'el-pagination': Pagination,
   },
   data() {
     return {
       currentPage: 1, // 当前页码默认值为1
       pageSize: 10, // 每页显示条数默认值为10
       total: 0, // 数据总数
     }
   },
   methods: {
     // 翻页触发的方法
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage;
       // 根据 this.currentPage 获取对应页面数据
       //...
     }
   }
}
</script>

2. Parámetros de enlace

Defina tres parámetros comunes necesarios para la paginación en el objeto de datos del componente: página actual (número de página actual), tamaño de página (número de elementos de datos que se muestran en cada página) y total (número total de elementos de datos).

data() {
  return {
    currentPage: 1, 
    pageSize: 10, 
    total: 0,
  }
}

currentPage Indica el número de página actual. El valor predeterminado es 1,  pageSize que indica cuántos datos se muestran en cada página. Puede establecer un valor adecuado según la situación específica. El valor predeterminado es 10, que  total indica el número total de datos , que debe vincularse de acuerdo con el número total real de datos.

3. Evento de cambio de página

Al vincular  @current-change el evento, para monitorear la acción del usuario al pasar la página. El evento activará  handleCurrentChange el método y el parámetro es el número de página en el que se ha hecho clic actualmente. En este método, puede escribir la lógica correspondiente para realizar la adquisición y visualización de datos paginados.

Por ejemplo, el siguiente código puede obtener datos de la página actual a través de Axios:

methods: {
  handleCurrentChange(currentPage) {
    this.currentPage = currentPage;
    // 计算 start 和 limit，根据 currentPage 和 pageSize 设置 start 和 level
    const start = (currentPage - 1) * this.pageSize;
    const limit = this.pageSize;
    // 调用 API 获取数据
    axios.get(`/api/data?start=${start}&limit=${limit}`).then(response => {
      this.tableData = response.data;
    })
  }
}