我需要使用 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)获得的这些值。
可以帮助我吗?
最佳答案
要使用 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>
关于javascript - 如何使用 BootstrapVue 将值格式化为货币?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60602818/