vue 扁平化_vue 实现使用Filter过滤扁平化数据,将对象中的key自定义展示

本文介绍如何在Vue中使用filter过滤器处理扁平化数据。具体场景是根据kind字段展示不同类型的员工请假或出差信息,如出差开始时间、请假天数等。通过创建filterData对象存储不同类型的数据字段映射,并定义'parseStr'过滤器,实现在模板中使用v-for和过滤器显示自定义键值。
摘要由CSDN通过智能技术生成

vue 中的filter用法

Vue.filter('parseData',(str) => {

return str+'1'

})

{ { msg | parseData }}

现在有以下需求,管理员现在向后台请求到一组数据,包括员工请假,员工出差等数据,需要在前台展示出所有类型,比如kind为businessTravel,那么startTime为出差开始时间,如果kind为leaveEvent那么startTime为请假开始时间依此类推,在前台展示格式化后的key

// json

[

{

"kind": "businessTravel",

"startTime": "2019-07-01",

"endTime": "2019-07-10",

"day": "9",

"reason": "something just like this",

"check": true,

"checkID": "001",

"compareMen": "kd",

"compareMenPhone": "127.0.0.1"

},

{

"kind": "leaveEvent",

"startTime"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值