element-ui表格列金额显示两位小数的方法
作者:十方 发布时间:2024-04-26 17:41:10
标签: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')
来源:https://segmentfault.com/a/1190000016126729
0
投稿
猜你喜欢
- 24小时内记录(即86400秒)$sql="Select video_id,count(id)as n FROM `rec_dow
- 1.apache配置文件中打开vhost的配置LoadModule vhost_alias_module modules/mod_vhost
- 目录:分析和设计组件编码实现和算法用 Ant 构建组件测试 JavaScript 组件话说上期我们讨论了队列管理组件的设计,并且给它取了个响
- 1、字典中的键存在时,可以通过字典名+下标的方式访问字典中改键对应的值,若键不存在则会抛出异常。如果想直接向字典中添加元素可以直接用字典名+
- 一、查询当前部门下的所有子部门WITH dept AS ( SELECT *
- python中的turtle库是3.6版本中新推出的绘图工具库,那么如何使用呢?下面小编给大家分享一下。首先打开pycharm软件,右键单击
- 本文实例总结了Python中字符串的常见操作技巧。分享给大家供大家参考,具体如下:反转一个字符串>>> S = '
- MySQL命令行导出数据库1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Pro
- PDO::setAttributePDO::setAttribute — 设置属性(PHP 5 >= 5.1.0, PECL pdo
- 数据合并是数据处理过程中的必经环节,pandas作为数据分析的利器,提供了四种常用的数据合并方式,让我们看看如何使用这些方法吧!1.conc
- Python字符串处理学习中,有一道简单但很经典的题目,按照单词对字符串进行反转,并对原始空格进行保留: 如:‘ I love China!
- 本文实例为大家分享了Python实现猜拳游戏的具体代码,供大家参考,具体内容如下分析1.玩家从控制台输入内容2.电脑随机输出石头剪刀布3.判
- 本文实例讲述了python使用socket进行简单网络连接的方法。分享给大家供大家参考。具体如下:import socketprint &q
- 本文实例讲述了Python实现将一个正整数分解质因数的方法。分享给大家供大家参考,具体如下:遇到一个python编程联系题目:将一个正整数分
- 启动targetcli时遭遇ImportError: cannot import name ALUATargetPortGrou
- 一、腾讯语音合成介绍腾讯云语音合成技术(TTS)可以将任意文本转化为语音,实现让机器和应用张口说话。 腾讯TTS技术可以应用到很多场景,比如
- 拉勾网面试题1. 你首先说出三个不同的特殊数,要求必须是个位数,比如3、5、7。2. 让所有学生拍成一队,然后按顺序报数。3. 学生报数时,
- 本文实例讲述了python实现在字符串中查找子字符串的方法。分享给大家供大家参考。具体如下:这里实现python在字符串中查找子字符串,如果
- 1、说明在使用selenium时,不可避免的会遇到一些异常情况,比如超时、没有找到节点的错误等等。一旦出现这样的错误,程序就不能再运行了。这
- 目录查找和修复数据表冲突更新索引统计查找和修复数据表冲突数据表最糟糕的事情就是发生冲突。使用MyISAM存储引擎时,通常因为崩溃导致冲突。然