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; 图文混排，图片与文字居中对齐

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 ...