vue的el-table实现字段排序功能

在vue的开发过程中，我们有些功能是需要实现根据相关字段，如创建事件先后对角色进行排序。而且查询到的字段都放入到el-table中进行展示。这个时候有两种排序的方式。如下所示

页面排序【服务器不参与】

vue从服务器中查询到相关的数据用于页面的暂时如果只是将查询到的页面进行排序，这个时候我们可以使用如下方法。

在对应的需要排序的字段中使用sortable即可

<el-table-column
   prop="date"
   label="注册时间"
   sortable  // 在需要排序的字段中，添加sortable，就可以在前端实现当前页中的排序
   :default-sort="{prop: 'date', order: 'ascending'}"  //default-sort指定的默认排序,默认用date这一列排序,排序为升序,默认的排序也是升序
      >  
</el-table-column>

这样即可对vue页面进行排序了。

页面排序【需服务器参与】

而对于有些排序是需要对服务器中的所有数据进行排序，而不是只是刚刚从页面请求返回的部分数据进行排序的情况下，这个时候就需要页面重新从服务器中将数据load到页面中了。

方法如下

在el-table 中定义一个排序的请求的方法，这个方法是重新在服务器中load数据的方法，这里定义排序的字段以及升降序。

<el-table
   :data="dataList" 
   style="width: 100%
   @sort-change="onSortChange">  //onSortChange为排序发生改变时调用的方法
</el-table>

在methods方法中增加上面的方法如下

onSortChange(column) {
      console.log(column + '开始排序')
      this.initTable.query.sort = column.prop
      this.initTable.query.sortType = column.order
      this.getTableList()
    }

最后就是将需要自定义排序的字段增加排序字段

{ prop: 'createTime', label: '注册时间', sortable: 'custom' },
{ prop: 'playerLevel', label: '角色等级', sortable: 'custom'},

总结

上面就是在vue中实现排序的两种方法，希望对大家有所有帮助