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

Question

我需要使用 bootstrap-vue 格式化程序(b-table - 字段)将值格式化为货币。

我目前的尝试:

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的更多信息here 。如果您向下滚动到示例，然后继续向下滚动到 using options 部分，您将看到 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>