el-table自带排序，表格空值或无字段时排序结果混乱的解决办法

最新推荐文章于 2025-09-06 13:03:50 发布

原创最新推荐文章于 2025-09-06 13:03:50 发布 · 4.8k 阅读

5 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

30 篇文章

订阅专栏

在使用Element UI的el-table组件时，遇到当表格数据包含空值或未定义值时，内置排序功能无法正确排序的问题。为解决此问题，可以自定义`sortChange`函数，对数据进行预处理，将空值和未定义值的数据分离，然后分别进行升序或降序排序。具体实现包括监听`sort-change`事件，设置`sortable=custom`属性，并编写比较函数确保排序准确性。这样做可以确保即使在存在空值的情况下，表格排序依然正确无误。

el-table自带sortable属性可以实现纯前端排序【当然表格有分页的话还是得靠后端排序】。然后在开发的过程中发现一个问题，就是当表格里要排序的某一列字段某些行是空值null或者后端没返回该字段为undefined【很常见的场景】，点击表头排序就会发现结果根本不准确。

那么解决办法就是自定义sortChange函数，自己实现对当前表格data进行排序。

1、首先在el-table标签上加上

 @sort-change="sortChange"

2、在要排序的列上加上sortable="custom"

3、实现sortChange函数：

sortChange(column) {
      if (column.order !== null && column.prop) {
        let data1 = [];
        let data2 = [];
        for (let i = 0; i < this.list.length; i++) {
          let temp = null;
          temp = this.list[i][column.prop];
          if (temp === null || typeof temp == "undefined") {
            data2.push(this.list[i]);
          } else {
            data1.push(this.list[i]);
          }
        }
        if (column.order === "ascending") {
          data1 = data1.sort(this.compare(column.prop, "ascending"));
        } else {
          data1 = data1.sort(this.compare(column.prop, "descending"));
        }
        this.$nextTick(() => {
          this.list = data1.concat(data2);
        });
      }
      if (column.order === null) {
        this.list = this.tabData; // tabData存放的是list副本，不排序时恢复到初始状态
      }
    },
    compare(property, type, prop) {
      return function(obj1, obj2) {
        if (type === "ascending") {
          return obj1[property] - obj2[property];
        } else {
          return obj2[property] - obj1[property];
        }
      };
    },

思路很简单，就是用两个数组临时存放列表数据，当该数据为null或者不存在时，放到数组data2中；有数据的就放到data1里，然后根据是升序还是降序对有数据的一边进行排序，最后将两个数组连接起来得到结果。