如何使用 BootstrapVue 将值格式化为货币？答案

【问题标题】：How can I format a value as currency with BootstrapVue?如何使用 BootstrapVue 将值格式化为货币？
【发布时间】：2020-06-21 11:26:20
【问题描述】：

我需要使用 bootstrap-vue 格式化程序（b-table - fields）将值格式化为货币。

我目前的尝试：

fields: [
    { key: 'value', label: 'value(R$)', sortable: true,
        formatter: (value, key, item) => {
            return Number(item.value).toLocaleString('pt-BR', {
                style: 'decimal', currency: 'BRL'
            })
        }
    },
]

我需要以某种方式格式化这些从后端 (axios) 获得的值。

可以帮帮我吗？

【问题讨论】：

您当前的代码有什么问题？

标签： javascript vue.js

【解决方案1】：

要使用toLocaleString 将数字格式化为货币，您需要使用style: 'currency' 选项。

您可以阅读更多关于 toLocaleString here 的信息。如果您向下滚动到示例，然后继续向下到using options 部分，您将看到style: 'currency' 选项的几个示例。这是我找到信息的地方。

对于不同的选项，您还可以参考Intl.NumberFormat 参数部分。

请注意，这不会进行任何货币转换。

参见下面的 sn-p。

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { value: 123.45 },
        { value: 23 },
        { value: 12.6 }
      ],
      fields: [
          { key: 'value', label: 'value(R$)', sortable: true,
              formatter: (value, key, item) => value.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
          },
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app">
  <b-table :items="items" :fields="fields"></b-table>
</div>

【讨论】：

@Baumannzone 您在寻找什么文档？ Bootstrap-Vue 或 toLocaleString?
两者：D 我认为 bootstrap-vue 有一个 localeString 部分或其他东西?

【解决方案2】：

我也可以这样做：

{ key: 'value', label: 'value(R$)', sortable: true,
    formatter: (value, key, item) => {
        return Number(item.value/100).toLocaleString('pt-BR', {minimumFractionDigits: 2, style: 'decimal', currency: 'BRL'})
    }
},

【讨论】：

【解决方案3】：

toLocaleString 对我不起作用，这是一个可能的解决方案：

      formatter: (value, key, item) => {
        let formatter = new Intl.NumberFormat("es-ES", {
          style: "currency",
          currency: "EUR",
          minimumFractionDigits: 2
        });
        return formatter.format(value);
      }

谢谢。

【讨论】：