什么也不说了,直接上干货:

1.首先,获取后台数据到页面,并调用过滤器

在<script>中添加
onRefreshItems (currentPage, perPage) {
if (this.dataUrl) {
this.$http.get(this.dataUrl, {params: {page: currentPage, size: perPage}}).then(res => {
let labels = []
for (var i = 0; i < res.data.length; i++) {
let item = res.data[i]
item.status = report.formatStatus(item.status)
labels.push(item)
}
this.items = labels
})
}
}, 2.添加过滤器,在<script>中添加
filters: {
formatStatus (status) {
return report.formatStatus(status)
}
} 3.编写js文件(report.js)
export default {
formatStatus (status) {
if (status === 'TO_BE_PUT_INTO_STORAGE') {
status = '未入库'
} else if (status === 'PARTIAL_ARRIVAL') {
status = '月台部分收货'
} else if (status === 'WAREHOUSING_COMPLETION') {
status = '已全部入库'
} else if (status === '') {
status = ''
}
return status
}
}
4.引入
import report from '@/components/Table/report.js'

如有错误欢迎留言指点,谢谢

vue.js-过滤器 filters使用详细示例的更多相关文章

  1. Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

    1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...

  2. VUE -- vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  3. vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  4. vue使用过滤器 filters:{}

    在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法 我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了 在没有用过滤器的时候,是这样的: ...

  5. Vue.js -- 过滤器

    VueJs中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/ ...

  6. vue.js过滤器

    import Vue from 'vue' import { ENV } from '@/config/conf' const dateFormat = (str) => { var date ...

  7. vue中过滤器filters的使用

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

  8. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  9. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

随机推荐

  1. linux学习记录.4.常用命令

    帮助command --help    获取‘command‘命令的帮助 目录与文件 cd /home    进入‘home’目录 cd ..    返回上一级目录 cd       进入个人目录 c ...

  2. 网页中嵌入swf文件的几种方法

    1. object + embed       传统的方法 优点:浏览器兼容性好,是 Macromedia 一直以来的官方方法缺点:a.embed 标签是不符合 W3C 的规范的,无法通过验证.当然, ...

  3. phpStudy apache无法启动 apache启动后又停止

    一.是防火墙拦截: 二.是80端口已经被别的程序占用,如IIS,迅雷等: 三.是没有安装VC9运行库,php和apache都是VC9编译: 四.虚拟机配置路径中有中文: 五.在检测端口后强制重启 把配 ...

  4. LINUX修改、增加IP的方法,一张网卡绑定多个IP/漂移IP【转】

    临时增加IP命令:ifconfig eth0:1 ip地址 netmask 子网码 broadcast 广播地址 gateway 网关  ifconfig eth0:1 10.1.104.65 net ...

  5. python使用twisted搭建的一个socket服务

    服务端 # -*- coding: utf-8 -*- # @Time : 2018/9/19 21:41 # @Author : cxa # @File : tsTservTW.py # @Soft ...

  6. python 中的__del__

    # -*- coding: utf-8 -*- # @Time : 2018/9/19 20:21 # @Author : cxa # @File : delDemo.py # @Software: ...

  7. MySQL分页存储过程

    CREATE PROCEDURE ProcPage(in tableName varchar(20),#表名  in showField varchar(100),#要显示的列名  in whereT ...

  8. Discuz x3.2七牛远程附件设置

    一.DISCUZX2.5/3/3.1云存储通用接口1.1.0beta版本[8.22最新更新] 链接地址:http://www.discuz.net/thread-3399569-1-1.html 本帖 ...

  9. dc

    http://www.cnblogs.com/yjmyzz/p/docker-install-tutorial.html https://segmentfault.com/a/119000000510 ...

  10. Motan

    https://github.com/weibocom/motan/wiki/zh_userguide http://www.cnblogs.com/mantu/p/5885996.html(源码分析 ...