antD 表中的数字格式，或带逗号的 localeCompare() 数字字符串答案

【问题标题】：number formatting in antD tables, or localeCompare() number strings with commasantD 表中的数字格式，或带逗号的 localeCompare() 数字字符串
【发布时间】：2022-01-10 20:46:17
【问题描述】：

我有想要在 AntD 表中显示的值。我希望它们是可排序的，但也用逗号格式化，如“1,000”。理想情况下，我会将它们以整数形式存储在 React 状态中，然后在显示时将它们格式化为带逗号的字符串，但我还没有在 AntD tables 中找到最后一分钟进行此转换的方法。这是一个示例列 JSX 元素，显示未格式化但可排序的整数：

            <Column
              title="Population"
              dataIndex="population"
              key="population"
              sorter={(a, b) => a.population - b.population}
            />

我尝试将我的所有状态转换为格式化字符串，然后表格很好地显示它们，但是排序混乱了。我认为带有 numeric = True 的 localeCompare 可以解决此问题，但事实并非如此。

有了这个输入：

      let arr = ['999', '1,000', '1,001'];
      console.log(
        arr.sort((a, b) =>
          a.localeCompare(b, undefined, {
            numeric: true,
            ignorePunctuation: true,
          })
        )
      );

我希望输入按数字排序，但事实并非如此。也许我误解了 localeCompare() 的工作原理。结果如下：

[ "1,000", "1,001", "999" ]

所以我有两个问题，回答任何一个都可以解决我的问题：

我可以有一个 AntD 表，其中的列将整数格式化为显示的可读格式，如果可以，如何？
如果不是，我怎样才能简单地用逗号（和 $ 金额）对整数的字符串表示进行排序？我当然可以在这里使用正则表达式，但我希望有一个我错过的更简单的解决方案。将整数转换为字符串，然后再转换回整数对它们进行排序似乎很愚蠢。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

我认为在你的情况下最好的方法是使用Column 的render 属性。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";

const { Column } = Table;

const data = [
  {
    key: "1",
    name: "John Brown",
    salary: 1000
  },
  {
    key: "2",
    name: "Jim Green",
    salary: 2000
  },
  {
    key: "3",
    name: "Joe Black",
    salary: 999
  },
  {
    key: "4",
    name: "Jim Red",
    salary: 1001
  }
];

ReactDOM.render(
  <Table dataSource={data}>
    <Column title="Name" dataIndex="name" key="name" />
    <Column
      title="Salary"
      dataIndex="salary"
      key="salary"
      sorter={(a, b) => a.salary - b.salary}
      render={(value) => {
        return "$" + value.toLocaleString("en");
      }}
    />
  </Table>,
  document.getElementById("container")
);

【讨论】：