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

element ui 小数_element-ui表格列金额显示两位小数对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用element-ui):在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持)。定义过滤器filters:{rounding(value){returnvalue.toFixed(2)}}toFixed()方法可把Nu…

对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui):

element ui 小数_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=”充值金额 / 元”>

{
{scope.row.itemPrice / 100 | rounding}}

……

prop=”payPrice”

header-align=”center”

align=”center”

label=”支付金额 / 元”>

{
{scope.row.payPrice / 100 | rounding}}

……

“`

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

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

记录java/javascript让浮点数显示两位小数的方法

参考:http://www.jb51.net/article/46010.htm 另,如果只是要在页面层展示的时候,显示为两位小数,也可以直接改前端js代码. item.turnoverRate = …

easyui datagrid 格式化列显示两位小数、千分位

{ field: , formatter: function (value, row, index) { if (row != null) { ); } } }, //二位小数.千分位 { field …

js实现文本框自动显示两位小数

转自https://blog.csdn.net/qiji2011/article/details/81270552 1.js: //保留2位小数,如:2,会在2后面补上00.即2.00 functio …

thymeleaf中double/float格式化,四舍五入显示两位小数

private Float balance; 代码:

webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: ‘./’,  即可,如图  element ui字体图标不显 …

java 金额计算,商业计算 double不精确问题 BigDecimal,Double保留两位小数方法

解决办法================== http://blog.javaxxz.com/?p=763 一提到Java里面的商业计算,我们都知道不能用float和double,因为他们无法 进行精 …

随机推荐

Matlab 绘制三维立体图(以地质异常体为例)

前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 …

Socket Receive 避免 Blocking

我们知道 Socket Blocking 属性默认true . 表明Socket 处于同步调用 , Connect , 或 Send , Receive 需等待动作 完成才能继续执行. 有一种应用场景 …

我创建了一个网站,专门分享公众号的文章 https://asyons.com

网址:https://asyons.com/,为做个网站,自娱自乐的自明星,但投资也挺大的了,注册了一家公司,公财私章,做账报税,阿里云服务器,全职开发.算上时间价值,按小时,投资过5万了.

thinkPHP3.2.3集成swoole扩展

swoole.php #!/bin/env php <?php /** * 默认时区定义 */ date_default_timezone_set(‘Asia/Shanghai’); /** * …

HTML5&lbrack;8&rsqb;&colon; 图文混排,图片与文字居中对齐

element ui 小数_element-ui表格列金额显示两位小数999 img { /* …  */ vertical-align: t …

&lbrack;Android Pro&rsqb; 超能RecyclerView组件使用

RecyclerView最强大的功能在于秒变功能,只需要改动很少的代码就可以实现ListView,GridView及水平ListViw的切换功能 public class MainActivity e …

Android:WebView深入使用

webView = (WebView) findViewById(R.id.info_detail_webview); WebSettings webSettings = webView.getSet …

Android多线程研究(4)——从一道面试题说起

有一道这种面试题:开启一个子线程和主线程同一时候运行,子线程输出10次后接着主线程输出100次,如此重复50次.先看以下代码: package com.maso.test; /** * * @auth …

C&num;进程间通讯技术-整理。

原文:C#进程间通讯技术-整理. 扩展阅读:http://www.cnblogs.com/joye-shen/archive/2012/06/16/2551864.html 一.进程间通讯的方式 1) …

读《Ext&period;JS&period;4&period;First&period;Look》随笔

Ext JS 4是最大的改革已经取得了Ext框架.这些变化包括一个新类系统,引入一个新的平台,许多API变化和改进,和新组件,如新图表和新画组件.Ext JS 4是更快,更稳定,易于使用.(注意:Ex …

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34041.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注