vxe-table在vxe-column中千分位和保留两位小数
时间: 2023-12-10 19:34:57 浏览: 365
在vxe-table中,可以通过设置vxe-column的formatter属性来实现千分位和保留两位小数的功能。具体实现方法如下所示:
```html
<vxe-table :data="tableData">
<vxe-column field="price" title="价格" formatter="thousandthFormatter"></vxe-column>
</vxe-table>
```
```javascript
methods: {
// 自定义千分位和保留两位小数的格式化函数
thousandthFormatter({ cellValue }) {
if (cellValue) {
const parts = cellValue.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if (parts.length > 1) {
parts[1] = parts[1].substring(0, 2);
} else {
parts.push('00');
}
return parts.join('.');
}
return '';
}
}
```
在上述代码中,我们通过设置vxe-column的formatter属性为自定义的thousandthFormatter函数来实现千分位和保留两位小数的功能。在thousandthFormatter函数中,我们首先将cellValue转换为字符串,并使用正则表达式将整数部分按照千分位进行分隔。然后,我们判断是否存在小数部分,如果存在,则只保留小数点后两位,否则补充两个0。最后,我们将整数部分和小数部分拼接起来,并返回格式化后的结果。
阅读全文