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')

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • vue+element-ui+ajax实现一个表格的实例

    实例如下: <!DOCTYPE html> <html> <head> <script src="js/jquery-3.2.1.js"></script> <script src="vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.co

  • 利用vue和element-ui设置表格内容分页的实例

    html代码 因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数

  • Vue+element-ui 实现表格的分页功能示例

    Vue+element-ui 实现表格的分页功能示例

    本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum

  • element-ui 表格实现单元格可编辑的示例

    如下所示: <template> <el-table :data="tableData" border @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut" style="width: 100%"> <el-table-column label="日期" width="180&q

  • Element-ui table中过滤条件变更表格内容的方法

    组件中: <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sorta

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

    对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 定义过滤器 filters: { rounding (value) { return value.toFixed(2) } } toFixed() 方法可把 Number 四舍五入为指定小数位数的数字,使用语法如下: NumberObject.t

  • js实现四舍五入完全保留两位小数的方法

    本文实例讲述了js实现四舍五入完全保留两位小数的方法.分享给大家供大家参考,具体如下: //四舍五入保留2位小数(若第二位小数为0,则保留一位小数) function keepTwoDecimal(num) { var result = parseFloat(num); if (isNaN(result)) { alert('传递参数错误,请检查!'); return false; } result = Math.round(num * 100) / 100; return result; }

  • jQuery控制input只能输入数字和两位小数的方法

    前言 做为一个PHPER,难免会遇到那种表单中jQuery限制输入的问题,比如,限制空格的输入,只允许输入数字,以及小数点的控制等等,这里,我们就说一下数字的限制. jquery代码 话不多说,直接先上jQuery函数,具体的可以看注释说明,在使用这个之前,请务必保证已经提前引入了jQuery库,大家可以自己下载一个jQuery文件,然后引入,也可以查找CDN地址引入,比如在 https://www.bootcdn.cn/jquery/ 可以查找到很多版本的引入地址,直接找到你想要的引入就行.

  • python中round函数保留两位小数的方法

    在我们日常计算的过程中,如果计算出小数,对大量的被保留数据,采用四舍五入这种保留法的误差总和是最小的,能使被保留部分的与实际值差值不超过最后一位数量级的二分之一.四舍五入是一种精确度的保留法,是我们使用这种方法为基本保留法的原因.那在我们的python中如何四舍五入?如何保留小数?用round函数就可以. 1.round函数 python的内置函数,用于数字的四舍五入. 2.round 负数 四舍五入是围绕着0来计算的 示例 round(0.5) # 1.0 round(-0.5) #-1.0

  • JavaScript中判断为整数的多种方式及保留两位小数的方法

    一.使用取余运算符判断 任何整数都会被1整除,即余数是0.利用这个规则来判断是否是整数. function isInteger(obj) { return obj%1 === 0 } isInteger(3) // true isInteger(3.3) // false 以上输出可以看出这个函数挺好用,但对于字符串和某些特殊值显得力不从心 isInteger('') // true isInteger('3') // true isInteger(true) // true isInteger

  • vue金额格式化保留两位小数的实现

    目录 金额格式化保留两位小数 自定义过滤器 格式化金额(保留两位小数) 金额格式化保留两位小数 Vue.filter("number", function(data) {     return data.toFixed(2) }) 在需要的地方 {{integralval/100 | number}} 元 自定义过滤器 格式化金额(保留两位小数) 1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val =

  • 利用正则表达式校验金额最多保留两位小数实例代码

    目录 正则表达式校验金额最多保留两位小数,那么必须满足如下条件: 部分正则表达式符号说明: 第一步,小数点之前表达式 第二步,小数点及小数位置 总结 先给出表达式结果:^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$ 有同学留言0识别错误,可用这个:(([1-9]{1}\d*)(.\d{1,2})?)|(0{1}.\d{1,2})思路:1.小数点前非0,则小数位置可有可无: 2.小数点前为0,那么小数位置必有修改于 2022-08-03 不熟悉正则表达式的同学,咋一看,一

  • js保留两位小数方法总结

    本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一.我们首先从经典的"四舍五入"算法讲起 1.四舍五入的情况 var num =2.446242342; num = num.toFixed(2); // 输出结果为 2.45 2.不四舍五入 第一种,先把小数边整数: Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77 第二种,当作字符串,使用正则匹配: Num

  • element ui 表格动态列显示空白bug 修复方法

    在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

  • Flex中对表格中某列的值进行数字格式化保留两位小数

    Flex中对表格中某列的值进行数字格式化保留两位小数

    1.问题背景 一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="libr

随机推荐