前端实现elementUi table表格分页

1. 前端进行分页（后端返回所有的数据）

最主要的是对总数据进行分页截取某个部分的数据进行显示

<!-- 关键是对总数据的截取 tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) -->
<el-table
   :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
   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>
 <!-- 分页器 -->
 <div class="block" style="margin-top: 15px">
   <el-pagination
     align="center"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage"
     :page-sizes="[1, 5, 10, 20]"
     :page-size="pageSize"
     layout="total, sizes, prev, pager, next, jumper"
     :total="tableData.length"
   >
   </el-pagination>
 </div>
 <script>
export default {
  name: "elementui",
  data() {
    return {
      name: "elementUi",
      tableData: [
        {
          date: "2016-05-02",
          name: "第一页",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "第二页",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "第三页",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "第四页",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-01",
          name: "第五页",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "第六页",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "第一页",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "第二页",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "第三页",
          address: "上海市普陀区金沙江路 1519 弄",
        }
      ],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 2, // 每页的数据条数
    };
  },
  methods:{
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
    }
  }
};
</script>

2. 后端分页

前端只需要将对应的页码和每页的条数通过接口传递给后台即可

<el-table
  v-loading="loading"
  :data="tableData"
  :header-cell-style="tableHeadStyle"
>
  <el-table-column type="index" label="序号" align="center" min-width="180" />
  <el-table-column prop="name" label="姓名" align="center" min-width="180" />
  <el-table-column prop="sex" label="性别" align="center" min-width="180" />
  <el-table-column prop="contactPhone" label="联系电话" align="center" min-width="180" />
  <el-table-column prop="skillType" label="技能工种" align="center" min-width="180" />
</el-table>
<pagination
  v-show="total>0"
  :total="total"
  :page.sync="queryParams.page"
  :limit.sync="queryParams.size"
  @pagination="getList"
/>
<script>
export default {
  name: 'InfoAdmin',
  data() {
    return {
      // 列表loading
      loading: false,
      // 列表数据
      tableData: [],
      // 数据总数
      total: 1,
      // 筛选项
      queryParams: {
        page: 1,
        size: 10,
      }
    }
  }
  methods: {
    // 获取列表
    getList() {
      // 通过对象解析的方式获取到页码和每页条数
      const data = { ...this.queryParams, userId: 101 }
      this.loading = true
      getInfoAdmin(data).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>