之前在开发过程中遇到这么一个问题,一串数据需要在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的使用(开发小记)的更多相关文章

  1. vue中过滤器filters的使用

    组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...

  2. WordPress过滤器(Filters):apply_filters和add_filter

    过滤器(Filters)对于WordPress来说是非常重要的,它极大地扩展了WordPress的定制能力,提高了WordPress的灵活性.无论是制作主题还是开发插件,我们基本上都会或多或少地使用到 ...

  3. NodeJS+Express+MySQL开发小记(2):服务器部署

    http://borninsummer.com/2015/06/17/notes-on-developing-nodejs-webapp/ NodeJS+Express+MySQL开发小记(1)里讲过 ...

  4. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  5. Asp.Net Core 进阶(四)—— 过滤器 Filters

    一.介绍 Asp.Net Core Filter 使得可以在请求处理管道的特定阶段的前后执行代码,我们可以创建自定义的 filter 用于处理横切关注点. 横切关注点的示例包括错误处理.缓存.配置.授 ...

  6. C# web api 中过滤器的使用

    一.开篇 Fiter在Web API中经常会用到,主要用于记录日志,安全验证,全局错误处理等:Web API提供两种过滤器的基本类型:actionfilterattribute,exceptionfi ...

  7. 带农历日历的DatePicker控件!Xamarin控件开发小记

    原文:带农历日历的DatePicker控件!Xamarin控件开发小记 闲来无事开发了个日期选择控件,感兴趣的同学前往: https://github.com/MatoApps/Mato.DatePi ...

  8. 【广州.NET社区推荐】【译】Visual Studio 2019 中 WPF &amp; UWP 的 XAML 开发工具新特性

    原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio ...

  9. 【译】Visual Studio 2019 中 WPF &amp; UWP 的 XAML 开发工具新特性

    原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio ...

随机推荐

  1. EnumRemarkAttribute,获取属性值

    首先自定义一个RemarkAttribute [html] view plain copy using System;  using System.Collections.Generic;  usin ...

  2. JavaScript中new和this

    [TOC] new var obj = new Base(); 相当于: var obj = {}; //创建空对象obj obj.__proto__ = Base.prototype; //将空对象 ...

  3. 51 nod 机器人走方格

    从一个长方形的方格的右上角 走到 左下角 , 问一共有多少种不同的路线可以达到 . #include<stdio.h> #include<string.h> #include& ...

  4. How to: Modify a Project System So That Projects Load in Multiple Versions of Visual Studio

    http://msdn.microsoft.com/en-us/library/hh266706(v=VS.110).aspx

  5. SQL Server 事务及回滚事务的几种方法

    第一种: declare   @iErrorCount   int set@iErrorCount=0 begintran Tran1    insertinto t1(Id, c1) values( ...

  6. Yii2中rules验证规则

    required : 必须值验证属性 [['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredV ...

  7. TCP:三次握手、四次握手、backlog及其他

    TCP是什么 首先看一下OSI七层模型: 然后数据从应用层发下来,会在每一层都加上头部信息进行封装,然后再发送到数据接收端,这个基本的流程中每个数据都会经过数据的封装和解封的过程,流程如下图所示: 在 ...

  8. kafka_2.11-2.0.0_常用操作

    参考博文:Kafka消费组(consumer group) 参考博文:kafka 1.0 中文文档(九):操作 参考博文:kafka集群管理工具kafka-manager部署安装 以下操作可以在min ...

  9. urllib 学习一

    说明:Urllib 是一个python用于操作URL的模块   python2.x    ----> Urillib/Urllib2 python3.x    ----> Urllib  ...

  10. dmp文件的导入导出

    一.dmp文件的导入 方法一(需安装PLSQL) 1.运行PLSQL,在oracle登陆窗口输入用户名和密码登陆到数据库 2.运行工具>导入表,弹出导入对话框 3.单击下方选择文件按钮,在弹出对 ...