vue过滤器filter的使用

使用场景：格式化内容，如：时间戳 换成 年月日；状态类型换成文字

1、实现

模拟数据

const statusList = [
  { value: '0', label: '已发货', type: 'warning' },
  { value: '1', label: '加工中', type: 'primary' },
  { value: '2', label: '加工完成', type: 'success' },
  { value: '3', label: '已收货', type: 'info' },
  { value: '4', label: '删除', type: 'danger' }
]
data(){
  return{
  	statusList
  }
}

局部过滤器

 filters: {
    stateFilter: function(value) {
      const option = statusList.find(obj => {
        return obj.value === value + ''
      })
      return option ? option.label : ''
    },
    stateColorFilter: function(value) {
      const option = statusList.find(obj => {
        return obj.value === value + ''
      })
      return option ? option.type : ''
    }
  },

全局过滤器

Vue.filter('stateFilter', (value) => {
  const option = statusList.find(obj => {
    return obj.value == value
  })
  return option ? option.label : ''
})
Vue.filter('stateColorFilter', (value) => {
  const option = statusList.find(obj => {
    return obj.value == value
  })
  return option ? option.type : ''
})

2、使用方法

<el-tag size="medium" :type="state | stateColorFilter" class="marginLeftTenSix">{{ state |stateFilter }}</el-tag>

this.$options.filters.stateFilter(this.state)