element 实现分页

1.定义初始值

?

1 2 3 4 5 6 7

data(){    pageList:{       total:0,  //总条数       size:10,  //每页显示的数据       page:1　　　//当前页码     } }

2.调用分页的组件

?

1 2 3 4 5 6 7 8

<el-pagination       @size-change="handleSizeChange"       @current-change="handleCurrentChange"       :current-page="Number(pageList.page)"       :page-size="Number(pageList.size)"       layout="sizes, prev, pager, next"       :total="Number(pageList.total)">     </el-pagination>

3. 实现效果

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

1.初始化数据 query(data){       let option = {...data,...this.pageList}       query(option).then(res=>{         console.log(res)       })     }   2. //改变每页显示的数量     handleSizeChange(val) {       this,pageList.size = val       this.pageList.page = 1       this.query(this.fromData)     }, 3. //更改页码  handleCurrentChange(val) {       this.pageList.page = val       this.query(this.fromData)     }