장면:
먼저 elementUI 페이징 구성 요소에 대한 코드를 입력합니다. 다음은 페이징의 모든 기능입니다.
<el-pagination
:current-page="currentPage" //当前页码（4）
:page-sizes="[100, 200, 300, 400]" //分页时可选择每页显示多少条
:page-size="100" //默认每页条数
layout="total, sizes, prev, pager, next, jumper" //组件布局，子组件名用逗号分隔
:total="400" //一共多少条
@size-change="handleSizeChange" //切换每页显示多少条
@current-change="handleCurrentChange" //翻页的时候，记录当前是第几页
</el-pagination>
methods: {
handleSizeChange(val) {
console.log(`每页 ${
val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${
val}`);
}
},
data() {
return {
currentPage: 4
};
}
문제 설명:
요소 UI의 페이징 컴포넌트를 사용할 때 페이지를 넘길 때마다 현재 페이지 번호를 기록
현재 프로젝트 페이지 매김은 쿼리 인터페이스를 호출하므로 쿼리 조건이 없을 때 현재 페이지 번호를 보낼 수 있기를 바랍니다. 백엔드가 정상이며
쿼리가 있음 조건을 사용할 때 기본 currentPage = 1 (1이 아닌 경우 쿼리가 첫 페이지에 없으면 페이지 번호가 첫 페이지로 돌아오지 않음)
// 分页
handleSizeChange(size) {
this.pageSize = size //每页条数
this.search() //翻页时调用的接口
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage //翻页的时候，记录当前是第几页
this.search() //翻页时调用的接口
},
원인 분석:
컴포넌트에서 제공하는 메소드: current-change는
현재 페이지가 변경된 경우에만 트리거되며 현재 페이지 번호는 페이지를 넘길 때 기록되지만 새로 고침 시에는 트리거되지 않으므로 첫 번째 페이지로 돌아갈 수 없습니다. currentPage 를 강제하려면 = 1
해결책:
인터페이스 호출 시 매개변수가 참인지 거짓인지 를 판단하여 currentPage 값을 1 로 설정 할지 여부를 선택하는 매개변수가 추가된다.
다음은 코드의 일부입니다.
// 分页
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.search(false) // 设为false表示不需要更改currentPage的值
},
// 查询接口
async search(y) {
// 如果是调用查询，就更改currentPage
if (y !== false) {
this.currentPage = 1
}
//调用接口
const res = （接口名称）({
pageSize: this.pageSize,
pageNum: this.currentPage,
…… …… //其他参数这里不展示了
})
this.total = res.data.total //后端返回的，一共多少条数据
}
페이지에서 인터페이스를 호출할 때 페이징인지 쿼리인지 구별하기 위해 여기에 true를 작성해야 합니다.
<el-button type="primary" @click="search(true)" >查询</el-button>