element-ui表格列金额显示两位小数

2024-06-07 04:08:16

对于金额的显示，大多情况下需要保留两位小数，比如下面的（表格采用 element-ui）：

在vue.js中，对文本的处理通常是通过设置一系列的过滤器，过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

定义过滤器


filters: {rounding (value) {return value.toFixed(2)}
}

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字，使用语法如下：

NumberObject.toFixed(num)

其中 num 为必需项，用于规定小数的位数，取值范围 [0, 20]，有些实现可以支持更大的数值范围，如果省略了该参数，将用 0 代替。

js中保留两位小数的方法有很多，这里只使用了JavaScript自带的 toFixed() 方法。

使用过滤器

  prop="itemPrice"header-align="center"align="center"label="充值金额 / 元"&gt;&lt;template slot-scope="scope"&gt;&lt;span&gt;{{scope.row.itemPrice / 100 | rounding}}&lt;/span&gt;&lt;/template&gt;
&lt;/el-table-column&gt;
......
&lt;el-table-columnprop="payPrice"header-align="center"align="center"label="支付金额 / 元"&gt;&lt;template slot-scope="scope"&gt;&lt;span&gt;{{scope.row.payPrice / 100 | rounding}}&lt;/span&gt;&lt;/template&gt;
&lt;/el-table-column&gt;
......

其中数据 payPrice 是以分为单位保存的，显示的时候先转换成元，然后通过 rounding 过滤器保留两位小数。

到此element-ui表格列显示两位小数就实现了，关键是Vue的过滤器，详细使用参考【Vue过滤器】

来源：https://segmentfault.com/a/1190000016126729

转载于:https://www.cnblogs.com/lovellll/p/10145500.html

element-ui表格列金额显示两位小数相关推荐

Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
负数显示红字html语言,需要将单元格内的负数显示为红色且不带负号显示两位小数的格式代码是下面哪一种A、 0.00;[红色...
需要将单元格内的负数显示为红色且不带负号显示两位小数的格式代码是下面哪一种A. 0.00;[红色更多相关问题 SPEC性能测试能比时钟频率更全面地反映计算机处理器.存储结构和编译器的性能.它有两种表 ...
vb只显示两位小数_【名师课堂】苏教数学五年级上3.1小数的意义
微课视频第一课时微课视频第二课时电子课本同步练习参考答案教学设计小数的意义和读.写方法教材第30~32页的内容.1.使学生理解小数的意义.2.结合具体情境教学小数的意义,让学生初步认识小数 ...
金额保留两位小数，金额千分号，文本超出位数变引号方法
//千分号金额 export function getNum(num) {return (num || 0).toString().replace(/\d+/, function (n) {var l ...
用户输入金额限制两位小数完美解决，代码可以拿走，留下你的赞，赠人玫瑰，手留余香
<div> <span>只能输入数字</span> <input type="text" name="" οni ...
页面金额显示两位小数点问题
转载于:https://www.cnblogs.com/lcxdevelop/p/8600355.html
mysql查询的金额保留两位小数_mysql查询结果单位换算后保留两位小数
数据库表中sale列的值为23456.789 format函数说明:format(x,d)是mysql自带的格式化小数函数,format()函数会对小数部分进行四舍五入操作,整数部分从右向左每三位一 ...
微信小程序如何显示两位小数
利用.toFixed()函数即可: 如在.js文件中定义了 var data = (hexstr * 0.01).toFixed(2) 在.wxml中使用{{ data) }}绑定data数据就行 & ...
el-input输入金额，保留两位小数
需求:"只允许输入金额保留两位小数",有2种实现方法方法一(通过正则控制): html: <el-inputv-model="inputTable.amount& ...

最新文章

热门文章