一、后台修改

1. Controller 返回类型 换为 AjaxJson<IPage<Order>> 


2. 自定义一个静态方法 获取分页参数：

    public static final <T> Page<T> getPage(final Page<T> page, final HttpServletRequest request, final HttpServletResponse response) {
        // 设置页码参数（传递repage参数，来记住页码）
        String no = request.getParameter("pageNo");
        if (StringUtils.isNumeric(no)) {
            CookieUtils.setCookie(response, "pageNo", no);
            page.setCurrent(Integer.parseInt(no));
        } else if (request.getParameter("repage") != null) {
            no = CookieUtils.getCookie(request, "pageNo");
            if (StringUtils.isNumeric(no)) { page.setCurrent(Integer.parseInt(no));
            }
        }
        // 设置页面大小参数（传递repage参数，来记住页码大小）
        String size = request.getParameter("pageSize");
        if (StringUtils.isNumeric(size)) {
            CookieUtils.setCookie(response, "pageSize", size);
            page.setSize(Integer.parseInt(size));
        } else if (request.getParameter("repage") != null) {
            no = CookieUtils.getCookie(request, "pageSize");
            if (StringUtils.isNumeric(size)) {
                page.setSize(Integer.parseInt(size));
            }
        } else if ("-1".equals(size)) {
            page.setSize(Integer.parseInt(size));
        } else {
            page.setSize(10);
        }

        String pageCurrent = request.getParameter("page.current");
        String pageSize = request.getParameter("page.size");
        String pageOrders = request.getParameter("page.orders");
        page.setCurrent(isNotBlank(pageCurrent) ? Long.parseLong(pageCurrent) : page.getCurrent());
        page.setSize(isNotBlank(pageSize) ? Long.parseLong(pageSize) : page.getSize());
        page.setOrders(isNotBlank(pageOrders) ? JSON.parseArray("[" + pageOrders + "]", OrderItem.class) : page.getOrders());

        return page;
    }

注：2 - 26 行 是对老数据的处理，可以删除；

      28 - 33 行 才是需要的，这里可以看到，对排序处理只支持单字段排序，如果需要多字段排序，可以自行设计


3. Service findPage 方法修改

public IPage<Order> findPage(Page<Order> page, Order eo) {
    IPage<Order> pageResult = mapper.findList(page, eo);
    return pageResult;
}

4. Mapper.java 修改，覆盖 findList 方法

@Mapper
@Repository
public interface OrderMapper extends BaseMapper<Order> {

    IPage<Order> findList(Page<Order> page, Order eo);

5. Mapper.xml 修改，修改 findList SQL

<select id="findList" resultType="Order">
    SELECT
    <include refid="orderColumns"/>
    FROM smp_store_order a
    <include refid="orderJoins"/>
    <where>
        a.del_flag = '0'
        <if test="eo.id != null and eo.id != ''">
            AND a.id = #{eo.id}
        </if>
        <if test="eo.orderStatus != null and eo.orderStatus != ''">
            AND a.order_status = #{eo.orderStatus}
        </if>
        <if test="eo.createBy != null and eo.createBy != ''">
            AND a.create_by = #{eo.createBy}
        </if>
    </where>
    <choose>
        <when test="page !=null and page.orders != null and page.orders.size > 0">
            ORDER BY
            <foreach collection="page.orders" item="item" index="i" open="" separator="," close="">
                ${item.column}<if test="item.asc"> ASC</if><if test="!item.asc"> DESC</if>
            </foreach>
        </when>
        <otherwise>
            ORDER BY a.update_date DESC
        </otherwise>
    </choose>
</select>


6. Controller 返回

        Page<Order> pageParam = getPage(new Page<Order>(), request, response);
        IPage<Order> pageResult = orderService.findPage(pageParam, eo);
        return AjaxJson.success(pageResult);


二、PC端 vue 修改修改

1. 修改 OrderList.vue 中的 el-table

<el-table :data="dataList"  修改为  <el-table :data="page.records"


2. 修改 OrderList.vue 中的 el-pagination，按如下修改

<el-pagination
  @size-change="sizeChangeHandle"
  @current-change="currentChangeHandle"
  :current-page="page.current"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="page.size"
  :total="page.total"
  background
  layout="total, sizes, prev, pager, next, jumper">
</el-pagination>


3. 修改 data () 

将 dataList: [],    pageNo: 1,   pageSize: 10,    total: 0,   orderBy: '', 修改为 page: {},

也可以把参数设置全，如下：


  page: {
    size: 10,
    total: 0,
    current: 1,
    records: [],
    orders: null
  },


4. 修改 refreshList () 方法

将 params 参数修改为如下内容：

  params: {
    'page.current': this.page.current,
    'page.size': this.page.size,
    'page.orders': this.page.orders,
    ...this.searchForm
  }
请求成功后，then 中内容修改为： 
  }).then(({data}) => {
    if (data && data.success) {
      this.page.size = data.data.size
      this.page.total = data.data.total
      this.page.current = data.data.current
      this.page.records = data.data.records
      this.loading = false
    }
  })


5. 每页数 sizeChangeHandle (val) 方法修改如下：

    // 每页数
    sizeChangeHandle (val) {
      this.page.size = val
      this.page.current = 1
      this.refreshList()
    },


6. 当前页 currentChangeHandle (val) 方法修改如下：

    // 当前页
    currentChangeHandle (val) {
      this.page.current = val
      this.refreshList()
    },

7. 排序 sortChangeHandle (obj) 方法修改如下：


    // 排序
    sortChangeHandle (obj) {
      if (obj.order === 'ascending') {
        this.page.orders = JSON.stringify({column: obj.prop, asc: true})
      } else if (obj.order === 'descending') {
        this.page.orders = JSON.stringify({column: obj.prop, asc: false})
      } else {
        this.page.orders = null
      }
      this.refreshList()
    },