elementui小数_elementui表格列金额显示两位小数的方法

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

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

定义过滤器

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字&＃xff0c;使用语法如下&＃xff1a;

NumberObject.toFixed(num)

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

js中保留两位小数的方法有很多&＃xff0c;这里只使用了Javascript自带的 toFixed() 方法。

使用过滤器

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

......

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

......

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

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

PS&＃xff1a;Element-UI 表格 列过多内容换行问题

一般表格不会有很多列&＃xff0c;所以在使用时会很方便&＃xff0c;但是如果有25&＃43;个列时&＃xff0c;就会发现宽度完全不够用&＃xff0c;只有2000&＃xff0c;内容妥妥放不下会换行。

这时就需要找到一个完美的解决方法&＃xff0c;让内容不换行&＃xff0c;同时全部显示出来。

然而

没有我并找到什么好的解决方法&＃xff0c;只能在 el-table-column 中给个固宽先用着

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持编程之家。