如何修复 bootstrap-vue 表中的错误排序

Question

我正在使用bootstrap-vue。在table 组件中，我希望我的用户能够对值进行排序。

我为此设置了所有选项，但由于某种原因，排序并没有像我预期的那样进行。

我查看了docs 关于排序和设置的信息。我的问题是，以下数字（按降序排序时）是这样排序的：

856.780
832.912
827.873.000

显然，最后一个大于前两个，但由于某种原因，这不起作用。

现在，当我松开标点符号时，排序确实正确，但这会使数字表格变得丑陋。

再次，遵循docs（见上文）我正在使用sort-compare-options 道具：

sortOptions: {
    ignorePunctuation: true,
    numeric: true
}

编辑

我的字段如下所示：

fields: [
    { key: 'name', sortable: true, tdClass: 'table-cell-align' },
    { key: 'revenue', sortable: true },
    { key: 'costs', sortable: true },
    { key: 'result', sortable: true },
    { key: 'margin', sortable: true },
    { key: 'fte', sortable: true },
    { key: 'personell_costs_/_revenue', sortable: true},
    { key: 'other_costs_/_revenue', sortable: true},
    { key: 'revenue_/_fte', sortable: true},
    { key: 'details', sortable: false }
]

[
    {
        "name": "Medical Tattoo Innovations",
        "revenue": "34.254",
        "costs": "38.010",
        "result": "-4.414",
        "fte": "0",
        "margin": "0",
        "personell_costs_\/_revenue": "0",
        "other_costs_\/_revenue": "1",
        "revenue_\/_fte": "171.270",
        "details": "0"
    }
]

但这对我不起作用。

对此有什么想法吗？

Answer 1

827.873.000 是您的项目数据中的字符串，而不是数字（并且由于它有多个小数，浏览器 String.localCompare(...) 方法（由 b-table 内部使用）看不到作为有效数字，因此将其排序为字符串。

您可以预先将其转换为数字（但会丢失额外的十进制值），或者为这些字段列设置自定义排序比较例程。

https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine

您的自定义排序比较例程（比较两行）需要处理将字符串拆分为数字部分并按这些值排序。