對于金額的顯示，大多情況下需要保留兩位小數(shù)，比如下面的（表格采用 element-ui）：

在vue.js中，對文本的處理通常是通過設(shè)置一系列的過濾器，過濾器可以用在兩個地方：雙花括號插值 和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。

定義過濾器

filters: {rounding (value) {return value.toFixed(2)} }

toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字，使用語法如下：

NumberObject.toFixed(num)

其中 num 為必需項，用于規(guī)定小數(shù)的位數(shù)，取值范圍 [0, 20]，有些實現(xiàn)可以支持更大的數(shù)值范圍，如果省略了該參數(shù)，將用 0 代替。

js中保留兩位小數(shù)的方法有很多，這里只使用了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> ......

其中數(shù)據(jù) payPrice 是以 分 為單位保存的，顯示的時候先轉(zhuǎn)換成 元，然后通過 rounding 過濾器保留兩位小數(shù)。

到此element-ui表格列顯示兩位小數(shù)就實現(xiàn)了，關(guān)鍵是Vue的過濾器，詳細使用參考 【Vue過濾器】

來源：https://segmentfault.com/a/1190000016126729

轉(zhuǎn)載于:https://www.cnblogs.com/lovellll/p/10145500.html

總結(jié)

以上是生活随笔為你收集整理的element-ui表格列金额显示两位小数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。