vue-element-Pagination 分页 实现页面刷新

何禄
2023-12-01

//获取 列表数据

  // 列表数据
    getData() {
      this.formField.pageIndex = this.pagination.currentPage;
      this.formField.pageSize = this.pagination.pageSize;
      this.$api
        .API_AEHHLTY_DATAVIEWING_POST({ body: this.formField })
        .then((res) => {
          console.log(res, "列表数据");
          if (!res) return;
          this.tableData = res.response.list;
          this.pagination.currentPage = res.response.pageNum;
          this.pagination.pageSize = res.response.pageSize;
          this.pagination.total = res.response.total;
          this.tableData.forEach((item, index) => {
            item.indexDataAll.map((value) => {
              // console.log(value);
              Object.keys(value).map((v) => {
                item[v] = value[v];
                // console.log(item);
              });
            });
          });
          console.log(this.tableData);
        });
    },

 配置每页的列表数切换

  currentPageChange(val) {
      this.formField.pageSize = val; //更新每页的条数
      this.getData();
    },
    pageSizeChange(val) {
      this.formField.pageIndex = val;
      this.getData();
    },

随便复制一个分页粘贴替换 

 <div class="clearfix">
        <el-pagination
          class="pagination"
          @size-change="pageSizeChange"
          @current-change="currentPageChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>

亲测有效

 类似资料: