后台项目分页器使用

样式部分

    <!--工具条   v-if="paginationShow && total !== 0"    -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="sizes, prev, pager, next"
        @size-change="handleSizeChange"
        :page-sizes="[
          size,
          2 * size,
          3 * size,
          4 * size,
          5 * size,
          6 * size,
          7 * size,
          8 * size,
          9 * size,
        ]"
        :page-size="lineSize"
        background
        :current-page.sync="page"
        @current-change="handleCurrentChange"
        :total="total"
        style="float: right"
      >
      </el-pagination>
    </el-col>

数据

      page: 1, //列表当前页
      total: 0, //列表总数
      lineSize: 10, //显示数
      size: 10, //显示数
      pageSize: 1, //列表总页数
      paginationShow: true, //强制刷新分页组件

    //分页查询景区
    getScenicDist() {
      const params = {
        currentPage: this.page,
        lineSize: this.lineSize,
      };
      //分页查询的接口（传入pageSize和total 获取数据一下数据）
      getScenicPages(params).then((res) => {
        // this.loading = false;
        this.pageSize = res.data.pageSize;
        this.total = res.data.totalCount;
        this.tableData = res.data.data;
      });
    },
    //查询当前页
    handleCurrentChange(val) {
      this.loading = false;
      this.page = val;
      this.getScenicDist();
    },
    //修改每页列表数量
    handleSizeChange(val) {
      this.loading = false;
      this.lineSize = val;
      this.page = 1;
      this.getScenicDist();
    },

在created里面进入页面执行一次this.getScenicDist（）分页查询景区的方法