vue货币过滤器以及路由参数的使用

需求：点击放款本金进入放款订单页面，并携带当前表格的日期到即将跳转到的页面

背景：使用 element ui 的框架
需求1：货币过滤器

  filters: {famt: function(num) {if (!num) return "￥0.00";let sign = "";let cents = "";num = num.toString().replace(/\$|\,/g, "");if (isNaN(num)) num = "0";sign = num == (num = Math.abs(num));num = Math.floor(num * 100 + 0.50000000001);cents = num % 100;num = Math.floor(num / 100).toString();if (cents < 10) cents = "0" + cents;for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)num =num.substring(0, num.length - (4 * i + 3)) +"," +num.substring(num.length - (4 * i + 3));return "￥" + (sign ? "" : "-") + num + "." + cents;}}

使用时

<el-table-column label="放款本金（元）" align="center" prop="principalAmount" min-width="60"><template slot-scope="scope"><span class="btnName" @click="toLoanOrder(scope.row.currentDate)">{{ scope.row.principalAmount |famt}}</span></template>
</el-table-column>

当项目中过滤器使用较多时，可以考虑将其注册为全局的过滤器
参考 https://www.cnblogs.com/xiterjia/p/6701324.html

上面的方法是在单个组件里面注册过滤器的，下面我们可以将其变为全局的过滤器

首先，我们可以建立一个filters文件夹，在文件夹里面建立一个money.js的文件
在money.js文件夹里面写我们的过滤器函数
在main.js里面引入我们的过滤器
在页面直接使用即可

money.js

main.js

在页面中直接使用

需求2：点击进入放款页面，并携带表格日期

    //跳转到放款订单页面toLoanOrder(date) {this.$router.push({ path: "/LoanOrder", query: { date } });},

可以看到，点击过来的时候携带了日期，并且在时间选择器的ui组件上展示出来了

接下来，就是放款订单页面的代码了，一般我们在进入一个页面的时候，都会向后台发送一个请求，来请求最新的数据，这个时候我么就需要把传递过来的日期作为参数向后台发送过去

       getList() {var param={pageIndex: this.currentPage,pageSize: this.size};// 判断数据是否从数据页面过来的if(this.$route.query.date){var timeStr = this.$route.query.date;this.date = [timeStr + " 00:00:00", timeStr + " 23:59:59"];}//判断状态this.getTime();if(this.date1){param.startTime=this.date1;}if(this.date2){param.endTime=this.date2;}post('/manager/v1/loan/getLendingOrderList',param).then((response) => {this.landOrderList = response.data.data?response.data.data:[];this.total = response.data.totalCount;this.size = response.data.pageSize;})},

在this.getTime()函数之前，我们获取到的日期是这样的

我们需要将其转换为标准的日期格式，和lelemet ui 的时间格式相同，于是就用到了下面这个日期转换函数

        getTime() {let starttime = '';let endtime = '';let time = this.date;if(time){if(!time[0] == '') {starttime = this.moment(time[0]).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');}if(!time[1] == '') {endtime = this.moment(time[1]).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');}if(starttime == "Invalid date"){starttime="";};if(endtime == "Invalid date"){endtime="";};}this.date1 = starttimethis.date2 = endtime},

而当我们点击页面的搜索框的时候，可以重写一个这样的请求，在一开始的时候就调用这个时间转换器

      search(formInline){this.getTime()let para = {pageIndex: this.currentPage,pageSize: this.size}if(!this.date1 == '') {para.startTime = this.date1}if(!this.date2 == '') {para.endTime = this.date2}post('/manager/v1/loan/getLendingOrderList',para).then((response) => {this.landOrderList = response.data.data?response.data.data:[];this.total = response.data.totalCount;this.size = response.data.pageSize;})},

vue货币过滤器以及路由参数的使用相关推荐

vue+filter过滤器（多参数）传参 - 代码篇
vue+filter过滤器(多参数)传参 - 代码篇传1个参数 //html {{a1 | filterAa}} //js filters:{filterAa(a1){// a1是传入的参数} } ...
055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue两个取路由参数的方法
a.通过在路由上添加key/value串使用this.$route.query来取参数,例如: /router1?id=123 /router1?id=456 通过this.$route.query. ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
vue 路由参数变化，页面不刷新，provide /inject 完美解决方案
此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...
vue路由参数改变，组件数据没重新更新问题
最近一段时间在用vue做项目,遇到一个很纠结的问题,本来是两个页面样式结构相似,就是数据不同,所以在router里面配置了一个id参数,发现vue路由参数改变,组件数据没重新更新,查了一下官方文档,发 ...
【vue】Vue路由获取路由参数
vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...
Vue 跳转相同路由携带不同参数，而页面不刷新
由于组件是复用的,若要对路由参数的变化作出响应的话,就需要在此组件上使用 watch(监测变化) $route 对象 created() {this.listQuery.code = this.$ro ...

vue货币过滤器以及路由参数的使用

vue货币过滤器以及路由参数的使用相关推荐

最新文章

热门文章