vue定义全局的字典、filters

一、新建dictionary、filters目录

dictionary/index.js

export default {
  demandStatus: [
    { value: '', label: '全部' },
    { value: 'unpublish', label: '未发布' },
    { value: 'publish', label: '展示' },
    { value: 'close', label: '已关闭' },
  ],
}

filters/index.js

// 所有字典处理
export function commonFilter(val, type) {
  const dictMap = {}
  JSON.parse(localStorage.getItem(type)).map(item => {
    dictMap[item.value] = item.label
  })
  return dictMap[val] || val
}

二、main.js

import * as filters from './filters' // global filters
import dictionary from './dictionary' // global dictionary 

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
Object.keys(dictionary).forEach(key => {
  localStorage.setItem(key, JSON.stringify(dictionary[key]))
})

三、使用

<template v-slot="{ row }">
   {{ row.status | commonFilter('demandStatus') }
</template>