element中過濾器filters的使用（開發小記）

之前在開發過程中遇到這么一個問題，一串數據需要在el-table中展示，其中含有金額字段，需要將其轉換成標准數據格式，即三位一個逗號間隔。

今年剛畢業就上手項目了，第一次接觸的Vue，開發經驗少，也忘記了有過濾器這個玩意兒，傻傻的寫下了這種為自己震撼的數據處理，這僅僅是一個微不足道的小界面，這樣的數據處理有上千行的😱，做完還挺佩服自己，哈哈哈!!

for (let argument of this.selectConfirmList) {
                argument.balanTotal = (parseFloat(argument.balanTotal).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
                argument.interTotal = (parseFloat(argument.interTotal).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
                argument.otherAmo = (parseFloat(argument.otherAmo).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
                argument.value = (parseFloat(argument.value).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
              }

但是神奇的事情發生了，當我需要對這些數據進行數據處理的時候才發現，問題很大，這些數據中包含了“，”；畢竟咱是第一次開發，很多方面都考慮不到。於是我有了就問題解決問題的想法，在for循環前面先把數據處理好，在最后再寫一個數據格式的處理。

就這么做了一個數據量巨大的頁面，腦瓜子嗡嗡的，於是翻了翻書，對呀，不是還有計算屬性computed這個神器嘛，說干就干，乖乖，數據是不影響了，可是代碼。。。您看

computed: {
      prinBalance1() {
        let value = parseFloat(this.form.prinBalance)
        value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return value;
      },
      interBalance1() {
        let value = parseFloat(this.form.interBalance)
        value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return value;
      },
      total1() {
        let value = parseFloat(this.form.total)
        value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return value;
      },
      disburse1() {
        let value = parseFloat(this.form.disburse)
        value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return value;
      },
      cashBag1() {
        let value = parseFloat(this.form.cashBag)
        value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return value;
      },
 
 
    },

就這？就這？

到了這個時候想起了老師上課講的東西，幸虧沒有還給老師，過濾器，對呀我怎么沒有想到過濾器，見證奇跡的時候到了

頁面代碼：

<el-table
      ref="dataTable"
      :data="allClaimsList"
      tooltip-effect="dark"
      style="width: 100%">
        。。。。
      <el-table-column label="本金余額(元)" align="center">
        <template slot-scope="scope">{{ scope.row.balanTotal|dealValue }}</template>
      </el-table-column>
      <el-table-column label="利息余額(元)" align="center">
        <template slot-scope="scope">{{ scope.row.interTotal|dealValue}}</template>
      </el-table-column>
      <el-table-column label="代墊費用(元)" align="center">
        <template slot-scope="scope">{{ scope.row.otherAmo |dealValue}}</template>
      </el-table-column>
        。。。。。
    </el-table>

過濾器：

filters:{
      dealValue(value){
        value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return value;
      }
    },

簡直完美！在需要的地方加一個 | rounding大功告成！！

說笑了，其實寫這個的目的就是想告訴自己，實戰經驗是多么的重要，看一百遍書不如敲個項目學的東西多。