element-ui分页案例

分页案例

下面是一个使用Element UI的分页和表格组件，并通过Axios访问后台数据进行分页展示的示例代码

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="totalItems"
      layout="sizes, prev, pager, next"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示条数
      totalItems: 0, // 总条数
    };
  },
  mounted() {
    this.fetchData(); // 初始化页面数据
  },
  methods: {
    fetchData() {
      // 根据当前页数和每页显示条数发送请求获取数据
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
        },
      })
        .then((response) => {
          this.tableData = response.data.list;
          this.totalItems = response.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handlePageChange(currentPage) {
      // 处理页码变化的回调函数
      this.currentPage = currentPage;
      this.fetchData();
    },
    handleSizeChange(pageSize) {
      // 处理每页显示条数变化的回调函数
      this.pageSize = pageSize;
      this.fetchData();
    },
  },
};
</script>

在这个示例中，我们使用了Element UI的el-table表格组件和el-pagination分页组件。在mounted钩子函数中，我们调用fetchData方法初始化页面数据。

在fetchData方法中，我们使用Axios发送GET请求到后台接口/api/data，传递当前页数和每页显示条数作为参数。然后，根据后台返回的数据，更新tableData数组和totalItems变量。

在分页组件中，我们绑定了currentPage、pageSize和totalItems属性，以及current-change和size-change事件，分别处理页码和每页显示条数的变化。在回调函数中，我们重新调用fetchData方法，根据新的页码和每页显示条数获取对应的数据并更新页面。

请根据实际情况修改接口URL和表格列的定义，以适应你的项目需求。