element-ui分页器如何请求数据并更新分页器的总条数和当前页数
时间: 2023-08-28 22:15:41 浏览: 105
实现分页、更新
要实现element-ui分页器请求数据并更新分页器的总条数和当前页数,可以使用以下步骤:
1. 在组件中定义一个变量来存储当前页数和每页显示的数据条数,以及一个变量来存储总条数。
2. 在组件的 `mounted` 钩子函数中向服务器请求数据,请求成功后更新数据列表和总条数。
3. 在分页器组件中绑定页码和每页显示数据条数的变量,并监听分页器的点击事件,更新变量的值,触发数据更新。
下面是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData" border>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-pagination
v-model="currentPage"
:total="total"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
};
},
mounted() {
this.getData();
},
methods: {
getData() {
// 向服务器请求数据
this.$axios.get('/api/data', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize,
},
})
.then((response) => {
// 更新数据列表和总条数
this.tableData = response.data.list;
this.total = response.data.total;
})
.catch((error) => {
console.log(error);
});
},
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
},
};
</script>
```
在这个示例中,我们使用了 `mounted` 钩子函数向服务器请求数据,并更新了数据列表和总条数。同时,在分页器组件中绑定了 `currentPage` 和 `pageSize` 的变量,并监听了分页器的点击事件,更新变量的值,触发数据更新。当用户改变每页显示的数据条数时,我们同样调用了 `getData` 函数来重新请求数据。
阅读全文