告别混乱排序，轻松解决 element 表格组件排序结果不正确问题

前言

不知道大家在使用 element 表格组件时有没有发现表格列的排序功能，时好时不好，当数据都为个位数时，使用是正常的，一旦数据多元化后，排序就失去了作用，如下图：

---

解决方案

sort-method 方法

sort-method 方法是 element 表格组件提供的一个属性，用于指定自定义的排序方法。通过使用 sort-method 方法，你可以自定义排序规则，以确保排序结果正确。

在使用 sort-method 方法时，你需要在表格组件中添加一个 sort-method 属性，并将其值设置为一个函数。这个函数接收两个参数：prop 和 order。prop 表示当前排序的字段，order 表示排序的顺序（'ascending' 为升序，'descending' 为降序）。

在 sort-method 函数中，你可以根据 prop 和 order 来决定使用哪个字段进行排序，以及是升序还是降序。你可以使用 JavaScript 的数组排序方法（例如 Array.sort()）来实现排序逻辑。最后，返回排序后的数据即可。

这样，当你使用 element 表格组件进行排序时，会调用你自定义的 sort-method 方法来进行排序，从而确保排序结果正确。

核心代码

:sort-method="(a,b)=>{return a.age - b.age}"

加上后效果

---

完整代码

<template>
  <div>
    <el-table stripe :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="name" label="姓名"></el-table-column>
      <el-table-column align="center" prop="sex" label="性别"></el-table-column>
      <el-table-column :sort-method="(a,b)=>{return a.age - b.age}" align="center" sortable prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "小红",
          sex: "女",
          age: "21",
        },
        {
          name: "小兰",
          sex: "女",
          age: "6",
        },
        {
          name: "小美",
          sex: "女",
          age: "18",
        },
        {
          name: "小蓝",
          sex: "女",
          age: "32",
        },
      ],
    };
  },
};
</script>

---

动态表头时

上面我们演示的前端写死的表头，但有些场景可能表头都是后台数据返回的，那么这种情况该怎么进行排序呢，大家可以参考下面的代码。

<template>
  <div>
    <el-table stripe :data="tableData" border style="width: 100%">
      <el-table-column align="center" v-for="(item, index) in headData" :key="index" :prop="item.indexCode" :label="item.label" sortable
        :sort-method="(a, b) => {return a[item.indexCode] - b[item.indexCode]}">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟表头数据
      headData: [
        {
          indexCode: "age",
          label: "年龄",
        },
      ],
      // 模拟表格数据
      tableData: [
        {
          age: "19",
        },
        {
          age: "32",
        },
        {
          age: "22",
        },
        {
          age: "15",
        },
      ],
    };
  },
};

---

拓展

按字母排序

<template>
  <div>
    <el-table border :data="tableData" :sort-method="sortTable">
      <el-table-column prop="name" label="名称" sortable></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="score" label="分数" sortable></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "John", age: 25, score: 80 },
        { name: "Alice", age: 30, score: 90 },
        { name: "Bob", age: 20, score: 70 },
      ],
    };
  },
  methods: {
    sortTable(sortObj) {
      const { prop, order } = sortObj;
      return this.tableData.sort((a, b) => {
        if (order === "ascending") {
          if (prop === "name") {
            return a.name.localeCompare(b.name);
          } else if (prop === "age") {
            return a.age - b.age;
          } else if (prop === "score") {
            return a.score - b.score;
          }
        } else if (order === "descending") {
          if (prop === "name") {
            return b.name.localeCompare(a.name);
          } else if (prop === "age") {
            return b.age - a.age;
          } else if (prop === "score") {
            return b.score - a.score;
          }
        }
        return 0;
      });
    },
  },
};
</script>

在上面的代码中，我们使用了 element 的 el-table 组件来展示表格数据。通过设置 :sort-method 属性，我们将 sortTable 方法与表格的排序功能关联起来。

sortTable 方法接收一个 sortObj 参数，其中包含了排序的属性和顺序。我们根据属性和顺序来对表格数据进行排序。如果顺序是 'ascending'，我们根据属性的不同使用不同的比较方法来排序；如果顺序是 'descending'，我们使用相反的比较方法来排序。

在这个示例中，我们根据名称（name）、年龄（age）和分数（score）来排序表格数据。对于名称，我们使用了字符串的 localeCompare 方法来进行字母排序；对于年龄和分数，我们使用了减法运算符来进行数字大小排序。

效果如下：

---

设置默认进入页面就是升序或者降序

根据需要修改 :default-sort 属性的值，以实现不同的默认排序顺序。

• 降序排序

:default-sort="{ prop: 'name', order: 'descending' }"

• 升序排序

:default-sort=" { prop: 'name', order: 'ascending' }"

---

localeCompare() 方法

localeCompare() 方法用于比较两个字符串。它返回一个数字，表示字符串之间的比较结果。

该方法可以用于按照字母顺序比较字符串。它比较两个字符串的每个字符的 Unicode 编码值，并根据比较结果返回一个负数、零或正数。

如果第一个字符串在字母顺序上排在第二个字符串之前，那么 localeCompare() 方法返回一个负数。如果两个字符串相等，那么返回零。如果第一个字符串在字母顺序上排在第二个字符串之后，那么返回一个正数。

在上面的示例代码中，我们使用了 localeCompare() 方法来比较表格数据中的名称（name）属性。通过使用该方法，我们可以根据名称的字母顺序对表格数据进行排序。

例如，如果有两个名称分别为 John 和 Alice，那么 John.localeCompare(Alice) 将返回一个正数，表示 John 在字母顺序上排在 Alice 之后。