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 相关文章推荐
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
python实现文本文件合并
2015/12/29 Python
python学生信息管理系统实现代码
2019/12/17 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
求职信需要的五点内容
2014/02/01 职场文书
设计顾问服务计划书
2014/05/04 职场文书
篮球比赛口号
2014/06/10 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
小学见习报告
2014/10/31 职场文书
小班上学期个人总结
2015/02/12 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
深入理解python多线程编程
2021/04/18 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python