若依框架实现排序【升序或降序】很简单

前端实现

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中添加方法。

以上步骤操作到这，就实现了数据列表的倒序排序了。重新启动服务就可以看到实际效果了：