前端实现
1. 在表格上加监听函数@sort-change
。如下红框所示:
2. 在表行上加排序字:sort-orders,
可排序字sortable。
如下红框所示:
3. 添加监听函数实现。代码如下:
handleSortChange(column) {this.queryParams.orderByColumn = column.prop;//查询字段是表格中字段名字this.queryParams.isAsc = column.order;//动态取值排序顺序this.getList();}
完整代码如下:.
<el-table v-loading="loading" :data="liquid_heightList" @selection-change="handleSelectionChange" @sort-change="handleSortChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="时间" align="center" prop="dateTime" width="95" :sort-orders="['descending','ascending']" sortable="custom"><template slot-scope="scope"><span>{{ parseTime(scope.row.dateTime, '{h}:{i}:{s}') }}</span></template></el-table-column></el-table>method:{//排序,倒序handleSortChange(column) {this.queryParams.orderByColumn = column.prop;//查询字段是表格中字段名字this.queryParams.isAsc = column.order;//动态取值排序顺序this.getList();}
}
后端实现
只需在对应的xml文件中的selectXXList
里面加上参数解析即可,如下本文展示的案例,是在selectLiquidHeightList中添加方法。
以上步骤操作到这,就实现了数据列表的倒序排序了。重新启动服务就可以看到实际效果了: