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

Question

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

我目前的尝试：

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

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

可以帮我？

Answer 1

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

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

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

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

见下面的片段。

 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>

Answer 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'})
    }
},

Answer 3

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

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

谢谢。