使用el-pagination组件进行分页查询中由于单向数据流的原因,子组件不能修改父组件中的变量值。因此在传递子组件请求的page值时需要手动给父组件中的page赋值。
以下是实例代码:
1.分页组件
<!--分页组件-->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="getList"
/>
2.请求数据方法
getList(page) {
this.page = page
getTeacherListPage(this.page, this.limit, this.teacherQuery)
.then(response => { // 请求成功
// response接口返回的数据
// console.log(response)
this.list = response.data.rows
this.total = response.data.total
console.log(this.list)
console.log(this.total)
})
}
注意!由于单向数据流的原因,子组件无法直接修改父组件中的page值,但在调用getList()方法的过程中子组件会自动传入一个page参数,因此可以通过this.page= page的方式来修改父组件中的page值。