vue 中filters转换后台获取的数据字典

实际开发应用中，后端传给我们都是0,1,2,3等key值，前端要根据key值转换成lable值，这里用filters就比较合适，没有改变原数据，只在视图上体现；

全局filters使用

// 全局filters定义
const filters = {
	// 数据字典转换
	fmtText(value, arr) {
		let textArr = arr.filter(item => item.datacode == value);
		return textArr.length > 0 && textArr[0].datavalue
	},
    //时间格式转换
	dateFormat(value, reg) {
		return parseTime(value, reg)
	}
}
export default (Vue) => {
	Object.keys(filters).forEach(key => {
		Vue.filter(key, filters[key])
	})
}
在main.js引入
import filters from '@/filters'
filters(Vue)
使用页
这里默认第一个参数是当前值，第二个参数是传入的数组，这里对应的是后端获取的数据字典数组；
{{row.status|fmtText(arr)}}

局部filters使用

这里举例一个样式转换列子

  
 <span :class="status|setStatusStyle">{{status}}</span>

export default {
  filters: {
    setStatusStyle(value) {
      switch (value) {
        case 1:
          return "not-start";
        case 2:
          return "has-ing";
        case 3:
          return "end";
        default:
          return "";
      }
    }
  },
}

<style lang="scss" scoped>
.not-start {
  color: #8876ea;
}
.has-ing {
  color: #ffbc00;
}
.end {
  color: #666;
}
</style>