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" }
// 更多项
]
}