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

站在用戶的角度思考問題，與客戶深入溝通，找到安遠網(wǎng)站設計與安遠網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋安遠地區(qū)。

在vue.js中，對文本的處理通常是通過設置一系列的過濾器，過濾器可以用在兩個地方：雙花括號插值 和 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() 方法。

使用過濾器

<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>
......

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

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

PS：Element-UI 表格 列過多內(nèi)容換行問題

一般表格不會有很多列，所以在使用時會很方便，但是如果有25+個列時，就會發(fā)現(xiàn)寬度完全不夠用，只有2000，內(nèi)容妥妥放不下會換行。

這時就需要找到一個完美的解決方法，讓內(nèi)容不換行，同時全部顯示出來。

然而

沒有我并找到什么好的解決方法，只能在 el-table-column 中給個固寬先用著

el-table-column(align='center' width='130px')

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁名稱：element-ui表格列金額顯示兩位小數(shù)的方法
網(wǎng)頁地址：http://jinyejixie.com/article30/pgeipo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站改版、外貿(mào)網(wǎng)站建設、網(wǎng)站營銷、外貿(mào)建站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)