前言

很多时候我们在使用表格的自定义列表排序时就是根据数据列的大小进行升序和降序，今天就来旧事重提做个记录，讲讲我们经常遇到的问题,这里直接就拿blog.csdn.net/RenGJ010617…

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>

在标签里加sortable就会出现一个一个排序的按钮，大致长这样

其实在el-table中它也有做介绍，它的介绍是这样的：

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

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

<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目前提供的主流排序方法就是以上两种，也能解决大多数问题，但在解决实际需求时发现有时候我们用来排序的数据并不是一开始就能够获取的，而是可变的、计算的、实时变化的。

此时就要用到 @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;
    }
  });
};

如上所示，添加了 sortable="custom" 和 @sort-change 之后，本质就是让原先的排序按钮失效，并且监听该事件的发生，至于监听后到底触发什么事件，是按某种方式排序，还是弹出一个窗口，甚至关闭浏览器都可以自定义，这才是官方文档中“后端排序”的本质原理。