在使用Element UI的el-pagination组件进行查询操作时，如果当前页不更新，可能是因为没有正确地绑定当前页数(currentPage)和数据总数(total)属性，或者在查询后没有正确地更新这些属性。
以下是一个简单的解决方案示例：
- 确保你在数据对象中有
currentPage和total属性。 - 在查询方法中，更新
total属性为查询结果的总数。 - 在查询方法后，确保将
currentPage设置为初始页或者查询结果的第一页。
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
// 其他数据属性
};
},
methods: {
// 查询方法
fetchData() {
// 模拟查询操作
this.getDataFromServer().then(response => {
this.total = response.data.total; // 更新总数
this.currentPage = 1; // 可选，可以设置为查询结果的第一页
// 其他处理，如更新表格数据等
});
},
// 模拟从服务器获取数据的函数
getDataFromServer() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: {
total: 100, // 假设总数是100
// 其他数据
}
});
}, 1000);
});
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData();
}
},
created() {
this.fetchData(); // 创建时请求数据
}
};
</script>在这个例子中，当你点击分页组件的页码或者使用分页组件的size-change和current-change事件来改变页码或页面大小时，fetchData方法会被调用，并且更新currentPage和total属性。这样分页组件就会正确地显示当前页和总页数。