mybatisPlus分页查询前端代码

以下是一个基于Vue.js和Element UI的示例前端代码，用于实现MybatisPlus的分页查询功能：

<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
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      axios.get('/api/user', {
        params: {
          current: this.currentPage,
          size: this.pageSize
        }
      }).then(response => {
        const { records, total } = response.data
        this.tableData = records
        this.total = total
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.loadTableData()
    }
  }
}
</script>

在上面的代码中，我们使用了Element UI提供的`el-table`和`el-pagination`组件来展示分页查询结果。在`loadTableData`方法中，我们通过调用后端接口`/api/user`来获取分页数据。我们将当前页码和页面大小作为请求参数发送给后端，并将返回数据中的`records`数组和`total`总数赋值给`tableData`和`total`属性。在`handlePageChange`方法中，我们监听了`el-pagination`组件的页码变化事件，并根据新的页码重新加载数据。

注意：以上代码仅供参考，实际项目中需要根据具体情况进行修改和优化。