標題問題描述
后端返回數據有5.00
和3.30
這種數據,但是前端展示的時候返回對應分別為5
和3.0
,小數點后0都丟失了。
- 接口返回數據展示
network-Response
:
- 接口返回數據展示
network-Preview
:
- 錯誤數據效果展示
發現問題
- 瀏覽器接口network中
Preview
是返回的5和3.3,Response
返回的是5.00和3.30
因為后端返回的數據類型不是字符串,是數字類型 - 打印出來接口返回數據這里已經是精度丟失的數據,深拷貝也是返回的錯誤的數據精度
再頁面渲染的時候使用v-html
也不能生效
研究了一下是vue在渲染數據
的時候,處理數據把3.30格式化3.3,所以前端需要重新處理一下數據格式,格式化后端返回我們的正常數據
第一種:{{ parseFloat(scope.row.amountFee).toFixed(2) }}
第二種:{{ (scope.row.amountFee).toFixed(2) }}
第三種:使用第三方庫 BigNumber.js(可以 但沒必要~~~)
BigNumber = require('bignumber.js');
let num = new BigNumber(5).toFixed(2));
console.log(num.toFixed(2)); // "5.00"
正確效果展示
總結:
之前以為只有id
這種 LONG型
長度不夠的時候,會有精度丟失問題,后端會把返回的數據類型從數字改為字符串,解決此類問題。
現在是這種5.00
的數據類型vue再渲染的時候也會自動處理
,再不改變后端數據類型的情況下,前端可以手動修改一下,保證和后端返回的數據格式一致。