场景描述:
涉及金额的场景下,直接显示数值对用户极不友好,特别是金额较大时,很难正确读出。
这时候就需要使用千分位进行辅助。
实现环境:白码低代码开发平台;
准备工作:
准备订单数据表,存储订单数据,包含一个金额字段(数字类型),并准备几条测试数据。
实现步骤:
1、使用“集合beta”模板创建数据集
2、进入流程编辑页,点击“设置”进入属性编辑页
3、选中“金额”属性,在右侧属性选项卡的“自定义显示”选择“编程”
4、点开“编写代码”,class为“cell”的div即为显示该属性值div
{{value}}
5、将value改为formatValue。
{{formatValue}}
6、在下方js的 computed 中添加对应的formatValue()方法
formatValue(){
//将数值转为string
letvalueStr=this.value.toString();
//返回包含千分位的数值
returnvalueStr.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
}
7、完整代码:
{{formatValue}}
module.exports={
computed:{
//value原始值
//display显示的值
//data当前行的数据
//field当前属性
formatValue(){
//将数值转为string
letvalueStr=this.value.toString();
//返回包含千分位的数值
returnvalueStr.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
}
}
}
.cell{}
8、如果需要,也可在.cell中对单元格编写CSS样式,点击“确定”保存并关闭编辑窗口。
9、到此已完成,可以将数据集发布,根据需要添加到菜单中。
最终效果: