在表格列中显示金额两位小数的元素界面方法
对于金额的显示,大多数情况下需要保留两位小数,如以下(表格采用element-ui):
在vue.js中,通常通过设置一系列过滤器来处理文本,可以在两个地方使用:双花括号插值和v-bind表达式(后者从2.1.0开始支持)。
定义过滤器
Filters: {舍入(值){返回值。tofixed (2)}} tofixed()方法可以将Number舍入到指定小数位数的数字,用法语法如下:
NumberObject.toFixed(num),其中num需要指定小数位数,取值范围为[0,20]。一些实现可以支持更大的数值范围。如果省略此参数,它将被0替换。
js中保留两位小数的方法有很多,这里只使用了JavaScript附带的toFixed()方法。
使用过滤器
El-table-column prop=' item price ' header-align=' center ' align=' center ' label='充值金额/元'模板slot-scope=' scope' span {{scope。row . item price/100 | Rounding } }/span/模板/El-table-column.El-table-column prop=' pay price ' header-align=' center ' align=' center ' label=' payed amount/Meta '模板slot-scope=' scope' span {{scope。划船。payPrice/100 |四舍五入} }/span/template/El-table-column.其中数据payprice以分钟为单位保存,显示时转换为meta,然后通过舍入过滤器保留两位小数。
可以通过在element-ui表的列中显示两位小数来实现。关键是Vue的滤镜。详情请参考【Vue过滤器】
PS:元素-用户界面表格列换行问题,内容太多
一般来说,一个表没有很多行,所以使用起来很方便。但是,如果有25行,你会发现宽度根本不够,只有2000,适当放下内容就会换行。
这时候就要找到一个完美的解决方案,这样内容就不会换行,全部同时显示。
然而
没有我我没有找到好的解决办法。我只能在el-table-column中使用
El-table-column(align=' center ' width=' 130 px ')以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:在表格列中显示金额两位小数的元素界面方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。