當前位置:
首頁 >
element-ui表格列金额显示两位小数
發布時間:2025/7/14
45
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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() 方法。
使用過濾器
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-columnprop="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過濾器】
來源:https://segmentfault.com/a/1190000016126729
轉載于:https://www.cnblogs.com/lovellll/p/10145500.html
總結
以上是生活随笔為你收集整理的element-ui表格列金额显示两位小数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JQ和Js获取span标签的内容
- 下一篇: 极简模板语言实现