社区首页 >专栏 >el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能，利用@sort-change实现动态数据排序，el-table排序方法，el-table可变数据的动态排序

el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能，利用@sort-change实现动态数据排序，el-table排序方法，el-table可变数据的动态排序

watermelo37

发布于 2025-01-22 13:28:03

45400

代码可运行

文章被收录于专栏：前端专精前端专精

运行总次数：0

代码可运行

写这篇博客的原因是前段时间做了一个数据列可变的表格，同时需要实现在网页中更新了数据列之后，能够对表格进行排序的需求。如果想要直接了解实现el-table的动态数据动态排序（列数据是通过计算获得，并且可以在页面中修改，在此基础上实现数据变化后实时更新）。请直接跳到第三章：当数据列是不确定数据时，实现列排序功能

一、el-table的排序功能

在列的标签中添加 sortable 即可添加列排序标签，可添加多个。

    <el-table :data="rankingDataFormatted" stripe>
      <el-table-column
        prop="ranking"
        label="Rank"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="cityName"
        label="Country"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="score"
        label="Score"
        width="200"
        sortable
      ></el-table-column>
      <el-table-column prop="performance" label="Performance">
      </el-table-column>
    </el-table>

效果是这样的：

二、el-table的自定义排序功能

添加 sortable 标签是默认排序，添加 sort-method 或者 sort-by 则可以使用自定义的排序规则。

其中scoreOrder是一个定义在methods中的排序方法（如果是composition API就直接const scoreOrder = （参数）=> {方法体}）。

这个方法接受两个参数，代表要进行比较的两行数据，可以通过读取对应属性（比如这里对应的属性名是score）来进行比较，该方法接受一个返回值，返回-1代表第一个参数应排在第二个参数之前，返回1代表之后，也可以返回零，一般表示相等，实际使用中不太用的上。

    <el-table :data="rankingDataFormatted" stripe>
      <el-table-column 
        type="index" 
        label="Rank" 
        width="100"
      ></el-table-column>
      <el-table-column
        prop="cityName"
        label="Country"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="score"
        label="Score"
        width="200"
        :sort-method="scoreOrder"
      ></el-table-column>
      <el-table-column prop="performance" label="Performance">
      </el-table-column>
    </el-table>

随便举个例子：

methods(){
    scoreOrder(a, b) {
      // 自定义排序逻辑
      if (a.score< b.score) {
        return -1;
      }
      if (a.score> b.score) {
        return 1;
      }
      // 相同则返回0，表示不变
      return 0;
    },
}
//如果是composition API

    const scoreOrder = (a, b) => {
      // 自定义排序逻辑
      if (a.score< b.score) {
        return -1;
      }
      if (a.score> b.score) {
        return 1;
      }
      // 相同则返回0，表示不变
      return 0;
    },

三、当数据列是不确定数据时，实现列排序功能

现在来聊一聊关于不确定数据/可变数据的情况，elementui目前提供的主流排序方法就是以上两种，也能解决大多数问题，但在解决实际需求时发现有时候我们用来排序的数据并不是一开始就能够获取的，而是可变的、计算的、实时变化的。

如下图所示，formatScore是一个计算方法，此时Score这一列的数据是获取不到的，这样通过 sort-method 获得的行数据是null或者undefined。

此时就要用到 @sort-change 事件了，在elementui官方文档里是这么表述这个事件的：

当表格的排序条件发生变化的时候会触发该事件如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

由于官方没有具体的举例，“后端排序”乍一看好像格外高级，事实上这里的后端排序指的就是给你监听一个事件，你自己（在后端）写一个排序的API就行，这样获取数据的时候就是排好序的数据。也就是说“后端排序”并不一定要在后端完成，搞懂了原理就在前端写是一样的。

    <el-table :data="rankingDataFormatted" stripe @sort-change="tableSort">
      <el-table-column 
        type="index" 
        label="Rank" 
        width="100"
      ></el-table-column>
      <el-table-column
        prop="cityName"
        label="Country"
        width="200"
      ></el-table-column>
      <el-table-column label="Score" width="200" sortable="custom">
        <!-- 实现可变数据的动态排序 -->
        <template v-slot="scope">
          {{ formatScore(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="performance" label="Performance">
      </el-table-column>
    </el-table>

在点击排序按钮时就能触发tableSort方法，按实际需求完成tableSort方法的逻辑，给个例子：

const tableSort = ({ column, prop, order }) => {
  // 直接使用array.sort()方法，对原始数组数据进行处理
  rankingDetailData.sort((a, b) => {
    const scoreA = formatScore(a);
    const scoreB = formatScore(b);
    if (order === "ascending") {
      return scoreA - scoreB;
    } else {
      return scoreB - scoreA;
    }
  });
};