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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
PHP getName()函数讲解
2019/02/03 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
prototype1.4中文手册
2006/09/22 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
Python中的类学习笔记
2014/09/23 Python
python线程、进程和协程详解
2016/07/19 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
求职推荐信范文
2013/12/01 职场文书
初一地理教学反思
2014/01/16 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Python中的变量与常量
2021/11/11 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis