解决element表格组件排序结果不正确问题

Posted 2023-03-04 水星记_

前言

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

---

解决方案

sort-method 方法

sort-method 方法对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致。

核心代码

: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",
        ,
      ],
    ;
  ,
;