npm install axios
<template><div><el-table :data="items" style="width: 100%"><el-table-column prop="id" label="ID" /><el-table-column prop="name" label="名称" /><!-- 添加其他列 --></el-table><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize":total="totalItems"layout="total, prev, pager, next, jumper"/></div>
</template><script>
import axios from 'axios';export default {data() {return {items: [],currentPage: 1,pageSize: 10,totalItems: 0,};},methods: {async fetchData(page) {try {const response = await axios.get(`/api/items`, {params: {page: page,limit: this.pageSize,},});// 假设后端返回的数据结构如下this.items = response.data.items;this.totalItems = response.data.totalItems; // 确保后端返回总条目数} catch (error) {console.error('Error fetching data:', error);}},handleCurrentChange(newPage) {this.currentPage = newPage;this.fetchData(newPage);},},mounted() {this.fetchData(this.currentPage); // 初始化数据},
};
</script><style scoped>
/* 自定义样式 */
</style>
后端接口示例
确保你的后端 API 可以处理如下的 GET 请求，并返回相应的数据：
GET /api/items?page=1&limit=10
示例响应：
{
"totalItems": 50,
"items": [
{ "id": 1, "name": "Item 1" },
{ "id": 2, "name": "Item 2" }
// 更多项
]
}
