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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 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
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
js中new一个对象的过程
2017/02/20 Javascript
几行js代码实现自适应
2017/02/24 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python获取当前路径实现代码
2017/05/08 Python
Python书单 不将就
2017/07/11 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python如何写出表白程序
2020/06/01 Python
国际商务专业学生个人的自我评价
2013/09/28 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
监护人证明
2015/06/19 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书