亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

element-ui表格列金額顯示兩位小數的方法

發布時間:2020-08-28 20:38:52 來源:腳本之家 閱讀:566 作者:十方 欄目:web開發

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

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')

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

阿城市| 荃湾区| 明星| 辽宁省| 淮阳县| 张家界市| 开原市| 荣成市| 东光县| 阜康市| 宜章县| 株洲县| 孝义市| 安乡县| 昂仁县| 崇义县| 蒲城县| 吉水县| 图木舒克市| 延庆县| 凤凰县| 太白县| 恭城| 大安市| 景洪市| 冷水江市| 尚义县| 通化县| 阳原县| 巴彦县| 芜湖县| 同江市| 桐城市| 龙里县| 通州区| 建湖县| 大冶市| 睢宁县| 乌恰县| 罗山县| 大洼县|