关于elementUI 表格组件 自定义sort 排序 （请求后端接口）

框架 spingboot + vue + mybatisplus + elementUI

需求 ：根据指定字段进行升降序

思路：获取需要排序的字段 和 排序规则，传给后端使用mybatis的动态SQL实现

elementUI官方文档：

​ 在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

前端：

	<el-table
      @sort-change="sortChange"
    >
	<el-table-column
        label="余额"
        prop="balance"
        align="center"
        width="100"
        sortable="custom"
      />
      <el-table-column
        label="消费总额"
        prop="consumptionSum"
        align="center"
        width="100"
        sortable="custom"
      />
      
      //排序
    sortChange(e) {
      switch (e.order) {
        case 'ascending':
          this.listQuery.sortRules = 'ASC'
          break
        case 'descending':
          this.listQuery.sortRules = 'DESC'
          break
        default:
          this.listQuery.sortRules = null
          break
      }
      switch (e.prop) {
        case 'balance':
          this.listQuery.sortField = 'balance'
          break
        case 'consumptionSum':
          this.listQuery.sortField = 'consumption_sum'
          break
        default:
          this.listQuery.sortField = null
          break
      }

      this.getList()
    }

动态SQL

<if test="memberParam.sortField != null and memberParam.sortField != ''
            and memberParam.sortRules != null and memberParam.sortRules != ''">
            order by ${memberParam.sortField} ${memberParam.sortRules}
        </if>