element-ui表格列金額顯示兩位小數(shù)的方法
對于金額的顯示，大多情況下需要保留兩位小數(shù)，比如下面的（表格采用 element-ui）：
在vue.js中，對文本的處理通常是通過設(shè)置一系列的過濾器，過濾器可以用在兩個地方：雙花括號插值 和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。
定義過濾器
filters: {
rounding (value) {
return value.toFixed(2)
}
}
toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字，使用語法如下：
NumberObject.toFixed(num)
其中 num 為必需項(xiàng)，用于規(guī)定小數(shù)的位數(shù)，取值范圍 [0, 20]，有些實(shí)現(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 是以 分 為單位保存的，顯示的時候先轉(zhuǎn)換成 元，然后通過 rounding 過濾器保留兩位小數(shù)。
到此element-ui表格列顯示兩位小數(shù)就實(shí)現(xiàn)了，關(guān)鍵是Vue的過濾器，詳細(xì)使用參考 【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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue?懸浮窗且?guī)ё詣游焦δ軐?shí)現(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐?shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue的mixin策略的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
vue、uniapp實(shí)現(xiàn)組件動態(tài)切換效果
在Vue中，通過使用動態(tài)組件，我們可以實(shí)現(xiàn)組件的動態(tài)切換，從而達(dá)到頁面的動態(tài)展示效果，這篇文章主要介紹了vue、uniapp實(shí)現(xiàn)組件動態(tài)切換,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問題
這篇文章主要介紹了解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
vue3在自定義hooks中使用useRouter報(bào)錯的解決方案
這篇文章主要介紹了vue3在自定義hooks中使用useRouter報(bào)錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能
這篇文章主要為大家詳細(xì)介紹了基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue.js中toast用法及使用toast彈框的實(shí)例代碼
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒加載，需要的朋友可以參考下2018-08-08
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下2023-06-06
vue過濾器可以在不改變原始數(shù)據(jù)，只是對數(shù)據(jù)進(jìn)行加工處理后返回過濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理,下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器必懂小知識的相關(guān)資料,需要的朋友可以參考下2021-10-10