material-ui-table 数据类型-货币 设置

Intl.NumberFormat：输入一串数字，然后对其进行金额格式化：

• 用 逗号 分隔（三位一逗号）

• 保留 2 位小数点 ，数不足补 0

• 四舍五入

• 要加金额符号 $

var number = 123456.789;
var result = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(number);
console.log(result);  // $123,456.79

Intl.NumberFormat 是对是启用语言敏感 数字格式 的对象的构造函数。

• locales：（可选）缩写语言代码 (BCP 47 language tag，例如：cmn-Hans-CN) 的字符串或者这些字符串组成的数组。

• style：指定数字的格式样式。

值	含义
decimal	纯数字格式 （默认值）
currency	货币格式
percen	百分比格式

• currency：在货币格式化中使用的货币符号。

  可能的值是 ISO 的货币代码 (the ISO 4217 currency codes) 。没有默认值，如果样式是 “currency”，必须提供货币属性。

值	含义
USD	美元
EUR	欧元
CNY	人民币

• useGrouping：是否使用分组分隔符。如千位分隔符或千/万/亿分隔符，可能的值是 true 和 false ，默认值是 true。

  原文链接：https://blog.csdn.net/Bule_daze/article/details/103287537

设置人民币符号

(1) Intl.NumberFormat设置

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  // 输出人民币
  currency: 'CNY',
  // 输出美元，语言设置为'en'
  // currency: 'USD',
  // currencySign选项启用记帐格式
  currencySign: 'accounting',
});
const res = formatter.format(5000000);
//输出结果：¥5,000,000.00
// 其他
// 人民币：输出结果：¥5,000,000.00
// 美元：输出结果：$5,000,000.00

(2) material-ui-table 的columns的属性设置

  const columns = [
    ......
    {
      title: '预算数(元)',
      field: 'budget',
      type: 'currency',  // 重点
      currencySetting: {
        locale: 'zh-CN',
        currencyCode: 'CNY',
      },  // 重点
      headerStyle: {
        textAlign: 'left',
        backgroundColor: '#fafafa',
      },
      cellStyle: {
        textAlign: 'left',
      },
    },
  ];