element ui表格排序失效问题

element ui table组件：Element - The world's most popular Vue UI framework

table属性：

 —default-sort 用于设置表格默认的排序列和排序规则，可以指定默认按照某一列进行升序或降序排序。

default-sort 只影响表格加载时的默认排序

<template>
  <!-- default-sort: 通过设置prop和order就可以指定默认按照指定列进行升序或降序排序
        prop: 表示指定排序的字段
        order: 表示排序的方式 ascending-升序 descending-降序
   -->
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort="{prop: 'version', order: 'descending'}"
  >
    <el-table-column
      prop="version"
      width="120"
      sortable
      label="版本号"
    >
    </el-table-column>
  </el-table>
</template>

 table-column 属性：

 —若不修改表格的默认排序，则只需要在el-table-column标签上加 sortable属性

 —对应列是否可以排序，在列中设置sortable属性即可实现以该列为基准的排序。

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

<template>
  <el-table style="width: 100%" :data="tableData">
    <!-- el-table-column标签上加sortable属性 显示排序图标-->
    <el-table-column 
       prop="version" 
       width="120" 
       sortable 
       label="版本号">
    </el-table-column>
  </el-table>
</template>

 后台返回的数据是经过升序处理的，因此表格中默认显示为升序排序。

 

 点击升降序图标排序：处理表单输入框输入的版本号不是标准格式数据的情况

<template>
  <div>
    <el-table style="width: 100%" :data="tableData">
      <el-table-column
        prop="version"
        width="120"
        sortable
        label="版本号"
        :sort-method="versionSortMethod">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {

  methods: {
    versionSortMethod(a, b) {
      /*
       提取版本号 使用正则表达式 .replace(/^v/i, '') 来去掉版本号前面去掉前面的 'v' | 'V'
       同时也确保若输入为 0.0.1 的情况能够被正确处理
       正则表达式：
        —^  表示匹配字符串以指定的字符开头
        —i  是一个修饰符 表示匹配时不区分大小写
        —'' 是替换的内容 表示将匹配到的指定开头的字符替换为空字符串
        情况 1. v0.0.1 : 开头有小写 'v' 会被替换成  0.0.1
        情况 2. V0.0.1 : 开头有大写 'V' 也会被替换成  0.0.1
        情况 3. 0.0.1 : 开头没有 'v' 因此不会进行任何替换 结果仍然是  0.0.1
       */
      const versionA = a.version.replace(/^v/i, '').split('.').map(Number);
      const versionB = b.version.replace(/^v/i, '').split('.').map(Number);
      // 比较各个版本号的部分
      for (let i = 0; i < Math.max(versionA.length, versionB.length); i++) {
        const numA = versionA[i] || 0; // 如果没有该部分，视为 0
        const numB = versionB[i] || 0;
        if (numA !== numB) {
          return numA - numB; // 返回比较结果
        }
      }
      return 0; // 相等
    }
  }
}
</script>