点击蓝字
关注我们
上次重度用户分享的恢复周更后，我们又收到了很多其他用户编写的使用心得分享。今天我们精选了一篇用户分享的“实用小技巧”，一起来看看是什么吧！
金额数值的千分位显示格式
Function Description
来自 白码用户 @Royyyyyyy 的分享
场景描述
涉及金额的场景下，直接显示数值对用户极不友好，特别是金额较大时，很难正确读出。
这时候就需要使用千分位进行辅助，于是我在白码上尝试了一下，发现可以简单实现。
准备工作
准备订单数据表，存储订单数据，包含一个金额字段（数字类型），并准备几条测试数据。
实现步骤
1、使用“集合beta”模板创建数据集
2、进入流程编辑页，点击“设置”进入属性编辑页
3、选中“金额”属性，在右侧属性选项卡的“自定义显示”选择“编程”
4、点开“编写代码”，class为“cell”的div即为显示该属性值div
<divclass="cell">{{value}}</div>
5、将value改为formatValue
<divclass="cell">{{formatValue}}</div>
6、在下方js的computed 中添加对应的formatValue()方法
formatValue(){
//将数值转为string
let valueStr=this.value.toString();
//返回包含千分位的数值
return valueStr.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
}
7、完整代码：
<template>
<div class="cell">{{formatValue}}</div>
</template>
<script>
module.exports = {
computed:{
// value 原始值
// display 显示的值
// data 当前行的数据
// field 当前属性
formatValue(){
//将数值转为string
let valueStr=this.value.toString();
//返回包含千分位的数值
return valueStr.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
}
}
}
</script>
<stylelang="less" scoped>
.cell {}
</style>
8、如果需要，也可在.cell中对单元格编写CSS样式，点击“确定”保存并关闭编辑窗口。
9、到此已完成，可以将数据集发布，根据需要添加到菜单中。
最终效果
再次感谢白码用户@Royyyyyyy 的精彩分享~
也欢迎各位白码用户可以根据文章内容，自己实操感受一下，有发现更好的解决方法也可以发出来和我们分享，与白码其他用户一起交流~
往期 · 推荐
白码科技 · BAIMA
扫描二维码添加客服微信
有任何问题都可以询问客服哦~
点击“阅读原文”了解更多白码资讯！