Vue3+springboot+mybatis-pius实现分页功能

首先创建前端工程项目，我这里使用的是Webstorm

安装各种依赖，我用的是element-plus，组件可以查看官方网站[element-plus](https://element-plus.gitee.io/zh-CN)
**main.js引入依赖包**

App.vue没啥好说的，加载一个路由

Home.vue为详细页面**el-table**为表格数据，从后端加载过来的，script脚本部分代码

<script>
import {Search} from "@element-plus/icons";

export default {
  name: "HomeName",
  component: {
    Search
  },
  data() {
    return {
      tableData: [],
      total: 0,
      Search,
      query: {
        pageNo: 1,
        pageSize: 10,
        name: ''
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {

    getList() {
      this.axios({
        url: 'http://localhost:8080/area/list',
        method: 'get',
        params: this.query
      }).then(res => {
        if (res.status === 200) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    handleSizeChange(newSize) {
      this.query.pageSize = newSize
      this.getList()
    },
    handleCurrentChange(newPage) {
      this.query.pageNo = newPage
      this.getList()
    },
    search() {
      this.getList()
    }
  }
}
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/e7cbcbd4dc7e41a3991f9c3741c6fa10.png)

route为路由配置

前端代码：area_web
后端代码：area