关于Vue ElementUI表格后台排序详解

ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<el-table @sort-change='sortChange'>
       <el-table-column sortable='custom' prop="dateTime" label="时间">
       </el-table-column>
</el-table>

sort-change方法自带三个参数，分别代表意义是：

column：当前列

prop：当前列需要排序的数据

order：排序的规则（升序、降序和默认[默认就是没排序]）

sortChange: function(column, prop, order) {
    // console.log(column + '-' + column.prop + '-' + column.order)
},

column.order是可以经过点击排序按钮后拿到的，然后就可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据。

 

*补充：因为排序默认有三种排序，关于去掉默认排序，可以试试修改这个属性sort-orders，它默认有三个值的：

['ascending', 'descending', null]，可以去掉最后一个null值。

温馨提醒：此补充仅当 sortable 为 true 时有效，就是说只适用于后台排序。