金额数值的千分位显示格式
Roy
• 发表于:2021-07-31 19:20:28 • 更新于:2021-07-31 19:20:28
416

场景描述:

涉及金额的场景下,直接显示数值对用户极不友好,特别是金额较大时,很难正确读出。这时候就需要使用千分位进行辅助。

准备工作:

准备订单数据表,存储订单数据,包含一个金额字段(数字类型),并准备几条测试数据。

金额数值的千分位显示格式

实现步骤:

1、使用“集合beta”模板创建数据集

金额数值的千分位显示格式

2、进入流程编辑页,点击“设置”进入属性编辑页

金额数值的千分位显示格式

3、选中“金额”属性,在右侧属性选项卡的“自定义显示”选择“编程”

金额数值的千分位显示格式

4、点开“编写代码”,class为“cell”的div即为显示该属性值div

 <div class="cell">{{value}}</div>

5、将value改为formatValue。

  <div class="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>

<style lang="less" scoped>

    .cell {}

</style>

8、如果需要,也可在.cell中对单元格编写CSS样式,点击“确定”保存并关闭编辑窗口。

金额数值的千分位显示格式

9、到此已完成,可以将数据集发布,根据需要添加到菜单中。

金额数值的千分位显示格式


本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
白码小助理
加入白码社区,学习更多开发小技巧!
微信扫码添加白码小助理