• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

element中过滤器filters的使用(开发小记)

开发技术 开发技术 1周前 (10-16) 14次浏览

之前在开发过程中遇到这么一个问题,一串数据需要在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大功告成!!

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


喜欢 (0)