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

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

巴特西

element中过滤器filters的使用（开发小记）

最新文章

热门文章