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

vue 中的filter用法

Vue.filter('parseData',(str) => {
    return str+'1'
})

<div>{{ msg | parseData }}div>

现在有以下需求，管理员现在向后台请求到一组数据，包括员工请假，员工出差等数据，需要在前台展示出所有类型，比如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": "2019-07-01",
    "endTime": "2019-07-2",
    "day": "1",
    "reason": "回家看老婆孩子",
    "check": false,
    "checkID": "002",
    "compareMen": "cur",
    "phone": "8.8.8.8"
  }
]

首先需要将每个不同的类型分类，需要展示哪一些数据，所以开始实现一个对象，分别来存储不同的类型

const filterData = {
  'businessTravel': {
    'field': ['kind', 'startTime', 'endTime', 'reason', 'compareMen', 'day'],
    'com': {
      'startTime': '出差开始时间',
      'endTime': '出差结束时间',
      'compareMen': '出差同行人',
      'day': '出差天数',
      'reason': '出差原因',
      'kind': '员工出差'
    }
  },
  'leaveEvent': {
    'field': ['kind', 'startTime', 'endTime', 'reason', 'day', 'phone'],
    'com': {
      'startTime': '请假开始时间',
      'endTime': '请假结束时间',
      'day': '请假天数',
      'reason': '请假原因',
      'phone': '本人联系方式',
      'kind': '员工请假'
    }
  }
}
export default filterData //导出

其中filed表示需要在前台需要展示的字段，com表示需要将object的key转换为自定义的对象

创建Filter过滤器

import filterData from './filterData.js' // 导入
Vue.filter('parseStr', (str, obj) => {
    return filterData[obj.kind]['com'][str]
})

由于考虑到不止这一个filter，如果全都写在入口文件main.js会给入口函数增加太大的文件，由于webpack是基于模块化，所以创建一个filter.js，在main.js中引入该filter.js

所以完整的filter.js如下

import Vue from 'vue'
import filterData from './filterData'
Vue.filter('parseStr', (str, obj) => {
    return filterData[obj.kind]['com'][str]
})

其中filterData和filter.js在同一目录下

main.js 直接引入就可以了

import './util/filter'

vue中直接使用v-for渲染，并且将key使用parseStr过滤输出

<template>
  <div class="home">
    <div v-for="(item, index) in res" :key="index">
      <p v-for="(item_1,index) in arr[item.kind]['field']" :key="index">{{item_1 | parseStr(item)}}---{{item[item_1]}}p>
    div>
  div>
template>

<script>
// @ is an alias to /src
import array from '../util/filterData.js'
export default {
  name: 'home',
  data () {
    return {
      arr: array,
      res: []
    }
  },
  created () {
    this.getData()
  },
  mounted () {
  },
  methods: {
    getData () {
      this.$Com.getFromServer('/Event.json').then(data => {
        this.res = data
      })
    }
  }
}
script>