element中分页器如何显示数据

在 Element UI 中，Pagination 分页组件只负责分页的显示和分页导航栏的生成。要将数据显示在分页器上，需要手动实现相应的逻辑。

下面是一个简单的例子，演示如何将数据显示在 Pagination 分页器上：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in listData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数据量
      total: 0, // 数据总数
    };
  },
  methods: {
    // 处理分页器页码变化事件
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData();
    },
    // 从服务器获取数据
    fetchData() {
      // 发送请求，获取当前页码对应的数据
      // ...
      // 模拟服务器返回的数据
      const data = [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
        // ...
      ];
      this.listData = data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
      this.total = data.length;
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

在上面的代码中，我们通过 `v-for` 指令将列表数据 `listData` 显示在表格中，同时在页面底部添加了 Pagination 分页组件。在 `handlePageChange` 方法中，我们监听了分页器的页码变化事件，并根据当前页码获取相应的数据。在 `fetchData` 方法中，我们模拟了从服务器获取数据的过程，并将当前页码对应的数据保存在 `listData` 中，并将数据总数保存在 `total` 中。通过这样的方式，就可以将数据显示在 Pagination 分页器上了。