vue分页

<el-pagination

      @size-change="SizeChange"

      @current-change="CurrentChange"

      :current-page="pagination.page"

      :page-sizes="pagination.pageSizes"

      :page-size="pagination.rows"

      :total="pagination.records"

      :layout="pagination.layout"

    ></el-pagination>

data() {

    return {

      pagination: {

        orderparam: "",

        rows: 20,

        page: 1,

        isAsc: true,

        records: 0,

        total: 1,

        pageSizes: [20, 50, 100, 200],

        layout: "total, sizes, prev, pager, next, jumper"

      },

    }

}

methods: {

    //分页修改

    SizeChange(val) {

      this.pagination.rows = val;

    },

    //分页修改

    CurrentChange(val) {

      this.pagination.page = val;

    }

}

最后需要在获取数据的接口方法里加上

this.pagination.records = data.Data.pagination.records;

后台接口方法需要赋与参数Pagination pagination