elementui将后端返回的所有数据分页展示,请给出示例
时间: 2023-06-06 15:09:12 浏览: 161
前端 elementUI 穿梭框大量数据分页处理
好的,以下是一个示例代码:
```
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination :total="total" :current-page.sync="currentPage" :page-size="pageSize" @current-change="handleCurrentChange"></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 存放表格数据的数组
total: 0, // 总数据条数
currentPage: 1, // 当前页数
pageSize: 10 // 每页数据条数
};
},
methods: {
fetchData() {
// 向后端请求数据,返回的数据是一个数组,存放在response.data中
// 这里使用axios发送请求,需要安装axios并引入
axios.get('/api/data', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
}).then(response => {
this.tableData = response.data.list; // 将请求到的数据存放到tableData数组中
this.total = response.data.total; // 更新总数据条数
}).catch(error => {
console.log(error);
});
},
handleCurrentChange(val) {
this.currentPage = val; // 更新当前页数
this.fetchData(); // 重新请求数据
}
},
mounted() {
this.fetchData(); // 在组件挂载完毕后请求数据
}
};
</script>
```
在这个示例中,我们使用了Element UI的el-table和el-pagination组件实现了一个分页展示数据的表格。我们将从后端接收的数据存放在tableData数组中,并通过el-pagination组件实现分页。在el-pagination组件上绑定了一个handleCurrentChange方法,用来改变当前页数并重新请求数据。详细的使用方法可以查看Element UI文档。
阅读全文