溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對于金額的顯示，大多情況下需要保留兩位小數，比如下面的（表格采用 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')
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
