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