websocket环境下element ui表格多种排序方法

最近公司要求在websocket环境下前端自己做表格的分页排序及模糊搜索,在网上搜了好几天没有我想要的,于是写个文章供大家参考

首先我们引入表格,给每个表头添加一个sortable属性
websocket环境下element ui表格多种排序方法
然后我们给表格一个方法@sort-change=“sort_change”
websocket环境下element ui表格多种排序方法
最后我们开始写这个方法,写这个方法分两步,因为我每一列都要排序,而且排序方法不一,所以我们首先要判断用户点击的是哪一列
websocket环境下element ui表格多种排序方法
我们判断每次用户点击之后就把分页器设置为第一页,这里传进来一个column参数column.prop即是上边我们写表头时对应的prop,所以以此来判断我们的排序方法===>descending和ascending他们代表的是升序还是降序,这里我们用this.proptype存一下prop的值。

接下来就是方法了,因为我这分四种,一种是纯数字,一种是在线或者离线,一种是时间,还有一种是复选框的布尔值
websocket环境下element ui表格多种排序方法
我们先传入ab两个参数,通过this.proptype的值来判断排序的方法,这个截图是时间排序的,原理是先转时间戳,再进行数字排序,这样就好了
websocket环境下element ui表格多种排序方法
websocket环境下element ui表格多种排序方法
希望对大家有所帮助!