40、使用elementUI分别实现前端，后端表格分页

在前端使用Element UI实现表格分页，后端提供分页数据的示例代码如下：

前端（Vue）:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    fetchData(page, size) {
      // 模拟发送请求到后端获取数据
      axios.get('/api/data', {
        params: {
          page,
          size
        }
      }).then(response => {
        this.tableData = response.data.items;
        this.total = response.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData(this.currentPage, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData(this.currentPage, this.pageSize);
    }
  },
  created() {
    this.fetchData(this.currentPage, this.pageSize);
  }
};
</script>

后端（Node.js）:

const express = require('express');
const app = express();
 
// 假设的数据库查询函数
function getDataFromDatabase(page, size) {
  // 这里应该是查询数据库的逻辑，返回对象包含items和total
  // items是当前页数据数组，total是数据总数
  return {
    items: [], // 填充你的数据
    total: 1000 // 填充你的总数
  };
}
 
app.get('/api/data', (req, res) => {
  const page = req.query.page || 1;
  const size = req.query.size || 10;
  const data = getDataFromDatabase(page, size);
  res.json(data);
});
 
app.listen(3000, () => {
  console.lo