1、在前端表格的查询条件对象中添加两个属性
sortModelField: '', //记录当前排序是用的哪个字段
sortModelOrder: '' ,//记录当前排序的顺序
2、在<el-table>标签上添加自定义排序事件:@sort-change="sortChange"
3、在列标签<el-table-column>上设置 sortable="custom"
4、自定义方法:
//排序
sortChange(column){
//判断排序规则
if (column.order) {
if (column.order === 'descending') {
this.queryParams.sortModelOrder = 'desc'
} else if (column.order === 'ascending') {
this.queryParams.sortModelOrder = 'asc'
}
this.queryParams.sortModelField = column.prop
} else {
this.queryParams.sortModelOrder = ''
this.queryParams.sortModelField = ''
}
//调用查询list接口
this.getList();
},
5、后端接收参数对象添加对应排序属性字段,在对应sql中(xml形式)根据条件进行拼接,注意,这里的填充值使用了${}符号而不是#{}, #{}用于数据填充 ${}用于拼接关键字
<if test="sortModelOrder != null and sortModelField != null ">
ORDER BY t.priority_order ${sortModelOrder}
</if>
<if test="sortModelOrder == null and sortModelField == null ">
ORDER BY t.priority_order , t.apply_date,t.supplier_no,t.component_no,t.component_lot_no,t.check_attribute
</if>