前端代码（使用
Vue3和
Element Plus）：
```
<
template>
<div>
<el-
table :data="
tableData" stripe>
<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-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</
template>
<script>
import { ref } from '
vue';
import { get
TableData } from '@/api/example';
export default {
setup() {
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const
tableData = ref([]);
async function getData() {
const params = {
currentPage: currentPage.value,
pageSize: pageSize.value,
};
const res = await get
TableData(params);
if (res.code === 200) {
tableData.value = res.data.list;
total.value = res.data.total;
}
}
function handleCurrentChange(page) {
currentPage.value = page;
getData();
}
getData();
return {
currentPage,
pageSize,
total,
tableData,
handleCurrentChange,
};
},
};
</script>
```
后端代码（使用Spring Boot 2）：
```
@GetMapping("/
tableData")
public CommonResult<PageResult<
TableData>> get
TableData(@RequestParam(required = false, defaultValue = "1") Integer currentPage,
@RequestParam(required = false, defaultValue = "10") Integer pageSize) {
PageResult<
TableData> pageResult =
tableDataService.get
TableData(currentPage, pageSize);
return CommonResult.success(pageResult);
}
```
其中，`
TableData`为实体类，`PageResult`为
分页结果类。`
tableDataService`为对应的Service类，用于
查询数据。
超级会员免费看
本文介绍了如何使用Vue3和Element Plus库创建一个具有按钮和查询功能的分页列表组件。包括组件的完整代码展示和实际应用示例。
订阅专栏 解锁全文
7570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
