elementUI table排序 sortable

最新推荐文章于 2025-05-06 17:15:21 发布

Artsman

最新推荐文章于 2025-05-06 17:15:21 发布

阅读量4.3k

点赞数 2

分类专栏：前端开发技术文章标签： elementui 前端 javascript 前端框架

本文链接：https://blog.youkuaiyun.com/Liu_JiaqiPro/article/details/120906991

版权

前端开发技术专栏收录该内容

30 篇文章

订阅专栏

使用 ElementUI 开发后台程序时，对于表格排序功能，可通过设置列的 sortable 属性实现。默认为升序，可通过 Table 的 sort-prop 和 sort-order 属性设定默认排序。若需后端排序，设置 sortable 为 'custom'，监听 'sort-change' 事件，根据回调获取排序信息，向后端请求数据。本文介绍了两种实现方式，一种简单适用于当前页面排序，另一种配合后端完成全局排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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列不排序时 
            }
      }
},

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

这样排序功能就做好啦