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


Posted in Javascript onAugust 24, 2018

对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 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() 方法。

使用过滤器

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

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

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

PS:Element-UI 表格 列过多内容换行问题

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

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

然而

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

el-table-column(align='center' width='130px')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 #Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 #Javascript
You might like
西德产收音机
2021/03/01 无线电
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JQuery小知识
2010/10/15 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
webpack打包js的方法
2018/03/12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python Celery定时任务的示例
2018/03/13 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
高级Java程序员面试题
2016/06/23 面试题
思想品德自我鉴定
2013/10/12 职场文书
学习新党章思想汇报
2014/01/09 职场文书
工作失职检讨书范文
2014/01/16 职场文书
2014年新生军训方案
2014/05/01 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
募捐感谢信
2015/01/22 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python