對於金額的顯示，大多情況下需要保留兩位小數，比如下面的（表格採用 element-ui）：

在vue.js中，對文字的處理通常是通過設定一系列的過濾器，過濾器可以用在兩個地方：雙花括號插值 和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。

定義過濾器

filters: {
  rounding (value) {
    return value.toFixed(2)
  }
}

toFixed() 方法可把 Number 四捨五入為指定小數位數的數字，使用語法如下：

NumberObject.toFixed(num)

其中 num 為必需項，用於規定小數的位數，取值範圍 [0, 20]

js中保留兩位小數的方法有很多，這裡只使用了JavaScript自帶的 toFixed() 方法。

使用過濾器

  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過濾器】

來源：https://segmentfault.com/a/1190000016126729