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大功告成！！

说笑了，其实写这个的目的就是想告诉自己，实战经验是多么的重要，看一百遍书不如敲个项目学的东西多。