本文共 1480 字，大约阅读时间需要 4 分钟。

我们在使用分页使，直接用表格()的自定义:pagination属性最方便；如下图所示：

基于VUE，我们必须在data中定义paginationOpt对象，代码片段如下：

// 分页      paginationOpt: {
           defaultCurrent: 1, // 默认当前页数        defaultPageSize: 5, // 默认当前页显示数据的大小        total: 0, // 总数，必须先有        showSizeChanger: true,        showQuickJumper: true,        pageSizeOptions: ["5", "10", "15", "20"],        showTotal: (total) => `共 ${
     total} 条`, // 显示总数        onShowSizeChange: (current, pageSize) => {
             this.paginationOpt.defaultCurrent = 1;          this.paginationOpt.defaultPageSize = pageSize;          this.searchCameraFrom(); //显示列表的接口名称        },        // 改变每页数量时更新显示        onChange: (current, size) => {
             this.paginationOpt.defaultCurrent = current;          this.paginationOpt.defaultPageSize = size;          this.searchCameraFrom();        },      },

调用接口时，❤一定要更新total值！！！！！❤并在发送请求前结构当前页和pagesize的值，否则一直时默认值1和5（我这边初始时1和5，可自己更改）

// 查询    searchCameraFrom() {
         console.log(this.cameraParams);      const {
    defaultCurrent, defaultPageSize } = this.paginationOpt;       this.$api.Camera.getCameraList({
           currPage: defaultCurrent,        pageSize: defaultPageSize,        info: this.cameraParams,      })        .then((res) => {
             if (res.code != "200") {
               return Promise.reject;          }          console.log(res);          this.cameraList = res.data;          this.paginationOpt.total = res.total;        })        .catch(() => {
   });    },

转载地址：http://dmlbi.baihongyu.com/