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 為必需項，用于規(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 是以 分 為單位保存的，顯示的時候先轉(zhuǎn)換成 元，然后通過 rounding 過濾器保留兩位小數(shù)。
到此element-ui表格列顯示兩位小數(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)文章
VScode更新后安裝vetur仍無法格式化vue文件的解決
這篇文章主要介紹了VScode更新后安裝vetur仍無法格式化vue文件的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue之使用JsonView來展示Json樹的實例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11
vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了VUE響應(yīng)式原理的實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了Vue中如何判斷對象是否為空，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue如何監(jiān)聽元素寬高變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了使用異步組件優(yōu)化Vue應(yīng)用程序的性能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
通過vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題
這篇文章主要介紹了vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題,文中單獨給大家介紹了vue router路由懶加載問題，需要的朋友可以參考下2018-04-04
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下2022-08-08