elementUI table排序 sortable

使用elementUI做后台程序时非常便利，但有时，插件的用法也会让人头疼。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

这是elementUI对Table的排序属性sortable的介绍说明

试着用自己的项目写一下试试

如果数据类型比较简单，比如数字时间可以像下面代码这样写

但是还是有弊端的，这个方式写后，排序只排当前这一页的顺序，现然是不推荐使用的

<el-table
      v-loading="listLoading"
      :data="userList"
      style="width: 100%"
      id="out-table"
    >
    <el-table-column
        prop="updateAt"
        label="时间"
        width="100"
        sortable
      >
      </el-table-column>
</el-table>

那么就有了另一种写法，配合后端完成排序

将sortable的值设成custom，后在<el-table>上监听sort-change事件。注意是@不是：。

<el-table
      v-loading="listLoading"
      :data="userList"
      style="width: 100%"
      id="out-table"
      @sort-change="changeSort"
    >
    <el-table-column
        prop="updateAt"
        label="时间"
        width="100"
        sortable="custom"
      >
      </el-table-column>
</el-table>

然后在js中声明这个监听的方法

获取到prop和order进行判断是哪列排序，升序还是降序

changeSort(val) {
      // console.log(val);   //val里面返回prop和order
      if (val.prop == "updateAt") {
            if (val.order == "ascending") {
                   //updateAt列升序时   
            }else if (val.order == "descending") {
                    //updateAt列降序时   
            }else{
                    //updateAt列不排序时 
            }
      }
},

建议后端的接口自带排序参数，这样会减少前端代码量，只需要在判断里为参数赋值即可。

这样排序功能就做好啦

标签：sort,sortable,val,elementUI,table,排序,updateAt,order
来源： https://blog.csdn.net/Liu_JiaqiPro/article/details/120906991