Vue + Element UI 实战：如何实现表格时间、金额字段排序

在后台管理系统开发过程中，表格是非常常见的功能。对于申请记录、合同记录、订单记录等数据，用户通常需要按照申请时间、创建时间、金额等字段进行排序。

本文以 Vue 2 + Element UI 为例，介绍如何使用 el-table 实现时间和金额字段的排序，主要涉及以下三个属性：

sortable：开启当前列排序
default-sort：设置表格默认排序规则
sort-method：自定义排序规则

一、使用 sortable 开启表格排序

Element UI 的 el-table-column 提供了 sortable 属性，只需要在需要排序的字段上增加该属性，就可以开启排序功能。

例如，申请记录列表中有一个"申请时间"字段：

复制代码

<el-table
  :data="dataTable"
  border
  style="width: 100%"
>
  <el-table-column
    prop="businessNo"
    label="申请编号"
    width="180">
  </el-table-column>

  <el-table-column
    prop="projectName"
    label="项目名称"
    width="150">
  </el-table-column>

  <el-table-column
    prop="submitTime"
    label="申请时间"
    sortable>
  </el-table-column>
</el-table>

关键代码：

复制代码

sortable

添加之后，用户点击"申请时间"表头，就可以在升序和降序之间进行切换。

二、设置表格默认排序

在实际项目中，通常希望页面第一次打开时就按照某个字段进行排序。

例如申请记录页面，希望最新提交的申请显示在最前面，那么就可以按照申请时间进行倒序排列。

使用 el-table 的 default-sort 属性：

复制代码

<el-table
  :data="dataTable"
  :default-sort="{
    prop: 'submitTime',
    order: 'descending'
  }"
>

其中：

复制代码

prop

表示需要排序的字段。

复制代码

order

表示排序方向：

ascending：升序
descending：降序

例如：

复制代码

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

表示页面加载时，默认按照 submitTime 字段进行降序排列。

注意

default-sort 中的 prop 必须和 el-table-column 中的 prop 保持一致。

例如：

复制代码

<el-table-column
  prop="submitTime"
  label="申请时间"
  sortable>
</el-table-column>

那么默认排序应该写成：

复制代码

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

而不是：

复制代码

:default-sort="{ prop: 'detailData.submitTime', order: 'descending' }"

除非你的表格数据本身确实是这种嵌套结构。

三、时间字段排序

对于时间字段，如果后端返回的数据格式比较规范，例如：

复制代码

2026-08-20 10:30:00
2026-08-19 15:20:00
2026-08-18 09:10:00

通常可以直接使用 sortable：

复制代码

<el-table-column
  prop="submitTime"
  label="申请时间"
  sortable>
</el-table-column>

但是在实际项目中，后端返回的时间格式可能并不统一，也可能存在空值。

为了保证时间排序更加可靠，可以使用 sort-method 自定义排序方法。

复制代码

<el-table-column
  prop="submitTime"
  label="申请时间"
  sortable
  :sort-method="sortByTime">
</el-table-column>

然后在 methods 中实现：

复制代码

methods: {
  sortByTime(a, b) {
    return new Date(a.submitTime).getTime() -
           new Date(b.submitTime).getTime()
  }
}

这里通过 new Date() 将时间转换成时间对象，再通过 getTime() 转换成时间戳。

最终通过两个时间戳相减得到排序结果。

四、金额字段排序

金额字段是另一个比较容易出现问题的地方。

例如后端返回：

复制代码

[
  {
    projectName: '项目A',
    amount: '1000.00'
  },
  {
    projectName: '项目B',
    amount: '900.00'
  },
  {
    projectName: '项目C',
    amount: '12000.00'
  }
]

这里的 amount 是字符串类型。

如果直接使用：

复制代码

<el-table-column
  prop="amount"
  label="合同金额"
  sortable>
</el-table-column>

就可能按照字符串进行比较，而不是按照实际的数字大小进行比较。

例如：

复制代码

1000
12000
900

字符串排序和数字排序的结果可能并不一致。

因此对于金额字段，建议使用 sort-method 自定义排序。

复制代码

<el-table-column
  prop="amount"
  label="合同金额"
  sortable
  :sort-method="sortByAmount">
</el-table-column>

对应的排序方法：

复制代码

methods: {
  sortByAmount(a, b) {
    return Number(a.amount || 0) -
           Number(b.amount || 0)
  }
}

通过 Number() 将金额转换成数字后，再进行大小比较。

这样无论后端返回的是：

复制代码

1000
900
12000

还是：

复制代码

"1000"
"900"
"12000"

都可以按照实际金额大小进行排序。

五、完整示例

下面是一个完整的 Vue + Element UI 表格示例：

复制代码

<template>
  <el-table
    size="small"
    :data="dataTable"
    v-loading="loading"
    border
    style="width: 100%"
    :default-sort="{
      prop: 'submitTime',
      order: 'descending'
    }"
  >

    <el-table-column
      type="selection"
      width="50">
    </el-table-column>

    <el-table-column
      prop="businessNo"
      label="申请编号"
      width="180">
    </el-table-column>

    <el-table-column
      prop="projectName"
      label="项目名称"
      width="150">
    </el-table-column>

    <el-table-column
      prop="submitTime"
      label="申请时间"
      sortable
      :sort-method="sortByTime">
    </el-table-column>

    <el-table-column
      prop="amount"
      label="合同金额"
      sortable
      :sort-method="sortByAmount">
    </el-table-column>

  </el-table>
</template>

<script>
export default {
  data() {
    return {
      loading: false,

      dataTable: [
        {
          businessNo: 'B001',
          projectName: '项目A',
          submitTime: '2026-08-20 10:30:00',
          amount: '1000.00'
        },
        {
          businessNo: 'B002',
          projectName: '项目B',
          submitTime: '2026-08-19 15:20:00',
          amount: '900.00'
        },
        {
          businessNo: 'B003',
          projectName: '项目C',
          submitTime: '2026-08-18 09:10:00',
          amount: '12000.00'
        }
      ]
    }
  },

  methods: {

    // 时间排序
    sortByTime(a, b) {
      return new Date(a.submitTime).getTime() -
             new Date(b.submitTime).getTime()
    },

    // 金额排序
    sortByAmount(a, b) {
      return Number(a.amount || 0) -
             Number(b.amount || 0)
    }

  }
}
</script>

页面首次加载时：

复制代码

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

会默认按照申请时间倒序排列。

用户点击"申请时间"之后，可以切换排序方向。

用户点击"合同金额"之后，则会通过：

复制代码

sortByAmount()

按照实际金额大小进行排序。

六、sortable、default-sort、sort-method的区别

在实际开发中，这三个属性容易混淆，可以简单理解为：

属性	作用
`sortable`	当前列是否允许排序
`default-sort`	表格第一次加载时按照什么字段、什么方向排序
`sort-method`	自定义具体的排序规则

例如：

复制代码

<el-table
  :default-sort="{
    prop: 'submitTime',
    order: 'descending'
  }"
>

负责设置默认排序。

复制代码

<el-table-column
  prop="submitTime"
  sortable>
</el-table-column>

负责开启用户手动排序。

复制代码

<el-table-column
  prop="amount"
  sortable
  :sort-method="sortByAmount">
</el-table-column>

负责定义自定义排序规则。

七、实际项目中的推荐写法

如果项目中的时间字段格式比较规范，可以直接：

复制代码

<el-table-column
  prop="submitTime"
  label="申请时间"
  sortable>
</el-table-column>

如果金额字段是字符串，建议转换成数字后再排序：

复制代码

<el-table-column
  prop="amount"
  label="金额"
  sortable
  :sort-method="sortByAmount">
</el-table-column>

sortByAmount(a, b) {
  return Number(a.amount || 0) - Number(b.amount || 0)
}

如果时间格式不确定，也建议通过 sort-method 统一处理：

复制代码

sortByTime(a, b) {
  return new Date(a.submitTime).getTime() -
         new Date(b.submitTime).getTime()
}

这样可以避免因为数据类型不同导致排序结果异常。

八、总结

在 Vue + Element UI 项目中，实现表格排序并不复杂。

最简单的场景，只需要给 el-table-column 添加：

复制代码

sortable

如果需要设置页面首次打开时的默认排序，则使用：

复制代码

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

如果字段本身存在数据类型问题，例如金额是字符串、时间格式不统一，则可以使用：

复制代码

:sort-method="sortByAmount"

或者：

复制代码

:sort-method="sortByTime"

通过自定义排序方法将数据转换成正确的数据类型之后再进行比较。

因此，在实际开发中可以按照下面的思路处理：

复制代码

普通字段
    ↓
sortable

需要默认排序
    ↓
default-sort

时间、金额等特殊字段
    ↓
sort-method
    ↓
转换成正确的数据类型
    ↓
进行排序

掌握 sortable、default-sort 和 sort-method 这三个属性后，就可以比较灵活地实现 Element UI 表格中的各种排序需求。