So verwenden Sie die Elementpaginierung

Die Paging-Komponente von Element UI ist sehr praktisch und praktisch. Sie müssen lediglich die Komponente in die Seite einführen und die entsprechenden Paging-Parameter übergeben.

1. Komponenten importieren

Zuerst müssen Sie die Paginierungskomponente in die Seite einführen  el-pagination, was durch den folgenden Code erreicht werden kann:

<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. Bindungsparameter

Definieren Sie drei allgemeine Parameter, die für die Paginierung im Datenobjekt der Komponente erforderlich sind: currentPage (aktuelle Seitennummer), pageSize (Anzahl der auf jeder Seite angezeigten Datenelemente) und total (Gesamtzahl der Datenelemente).

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

currentPage Zeigt die aktuelle Seitennummer an. Der Standardwert ist 1,  pageSize was angibt, wie viele Daten auf jeder Seite angezeigt werden. Sie können je nach Situation einen geeigneten Wert festlegen. Der Standardwert ist 10, was  total die Gesamtzahl der Daten angibt , die entsprechend der tatsächlichen Gesamtzahl der Daten gebunden werden muss.

3. Page-Turn-Event

Durch die Bindung  @current-change des Ereignisses wird die Aktion des Benutzers überwacht, der die Seite umblättert. Das Ereignis löst  handleCurrentChange die Methode aus und der Parameter ist die aktuell angeklickte Seitenzahl. Bei dieser Methode können Sie entsprechende Logik schreiben, um die Erfassung und Anzeige von Seitendaten zu realisieren.

Der folgende Code kann beispielsweise aktuelle Seitendaten über Axios abrufen:

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;
    })
  }
}