惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
J
Java Code Geeks
I
InfoQ
V
Visual Studio Blog
M
MIT News - Artificial intelligence
H
Help Net Security
博客园_首页
Blog — PlanetScale
Blog — PlanetScale
F
Fortinet All Blogs
Apple Machine Learning Research
Apple Machine Learning Research
人人都是产品经理
人人都是产品经理
G
Google Developers Blog
A
About on SuperTechFans
腾讯CDC
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Last Week in AI
Last Week in AI
小众软件
小众软件
aimingoo的专栏
aimingoo的专栏
罗磊的独立博客
大猫的无限游戏
大猫的无限游戏
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
云风的 BLOG
云风的 BLOG
S
SegmentFault 最新的问题
WordPress大学
WordPress大学

博客园 - 飘扬De黑夜

SqlServer 批量修改某个字段类型 U8数据库表汇总 FastReport 使用JSON作为数据源,手工赋值和导出PDF elementui关于表单校验validator Vue.js 2 使用 extends 扩展 element-ui 组件 FastReport-Barcode/QRCode 控件总是存在白色空白区域 双网卡同时访问内外网 vs项目启动后总是提示ID为XXX的进程当前未运行 uniapp 以npm模式安装插件的项目,如何让自定义组件支持easycom方式自动导入 Http请求中 Content-Type 常用格式说明 WPF入门基础之双向数据绑定 WPF入门之设置样式 ElementUI-如何给 el-dropdown 的 command 事件传递多个参数 TortoiseGit使用 管理系统中台示例参照 淘宝源安装npm visual studio 2022 自定义组件和自定义控件和用户控件的区别 SqlServer GoupBy 分组后对于非分组的某个字符串进行拼接 SQL Server 实现类似CountIF的函数
Vue2全局管理格式化器和Filter
飘扬De黑夜 · 2025-05-09 · via 博客园 - 飘扬De黑夜

有很多格式化器很多地方都要用,定义一个统一的文件进行管理方便使用

golbalFormatter.js

import moment from 'moment'
import store from '@/store'

/**
 * 格式化日期表示
 * @RETURN {示例:2021-04-01}
 */
function dateFormatter(row, column, currentValue) {
  return currentValue === null || currentValue === '' ? '' : moment(currentValue).format('YYYY-MM-DD')
}
/**
 * 格式化时间表示
 * @RETURN {示例:2021-04-01 18:04:01}
 */
function datetimeFormatter(row, column, currentValue) {
  return currentValue === null || currentValue === '' ? '' : moment(currentValue).format('YYYY-MM-DD HH:mm:ss')
}

// exports.install = function(Vue, options) {
//   /**
//    * 格式化日期表示
//    * @RETURN {示例:2021-04-01}
//    */
//   Vue.prototype.dateFormatter = function(row, column, currentValue) {
//     return currentValue === null ? '' : moment(currentValue).format('YYYY-MM-DD')
//   }
//   /**
//    * 格式化时间表示
//    * @RETURN {示例:2021-04-01 18:04:01}
//    */
//   Vue.prototype.datetimeFormatter = function(row, column, currentValue) {
//     return currentValue === null ? '' : moment(currentValue).format('YYYY-MM-DD HH:mm:ss')
//   }
// }

/**
 * @Description: 数据字典格式化通用函数(指定特定的TypeCode)
 * @Author: Shawn.zhang
 * @Date: 2021/9/3
 */
function dictionaryFormatter(cellValue, typeCode) {
  // console.log(store.getters.dataDict.length === 0)
  if (cellValue === null) {
    return ''
  }
  let dictData = store.getters.dataDict
  // console.log(dictData,'dictionary-data')
  if (dictData===null || dictData.length === 0) {
    store.dispatch('dataDict/getDataDict').then(result => {
      dictData = result
    })
  }

  const enumList = dictData.filter(item => {
    return item.TypeCode === typeCode
  })

  const formatterItem = enumList.find(item => {
    // 字符串和数字兼容设置
    return item.EnumValue === cellValue || item.EnumValue.toString() === cellValue || item.EnumValue === cellValue.toString()
  })

  // console.log(typeCode, cellValue, enumList, formatterItem, 'dictionaryFormatter-typeCode')
  return formatterItem === undefined ? cellValue : formatterItem.EnumDesc
}

/**
 * @Description:
 * @Author: Shawn.zhang
 * @Date: 2021/11/4
 */
function whetherFormatter(row, column, currentValue) {
  const yesNoDict = {
    true: '是',
    false: '否'
  }
  return currentValue===null?'否':yesNoDict[currentValue]
}

function enableFormatter(row, column, currentValue) {
  const dict = {
    true: '启用',
    false: '停用'
  }
  return dict[currentValue]
}

/**
 * @Description:
 * @Author: Shawn.zhang
 * @Date: 2021/11/4
 */
function equipmentStatusFormatter(row, column, cellValue,index) {
  const itemOptions =  [{ value: 1, label: '在用' }, { value: 2, label: '维修中' }, { value: 3, label: '停用' }, { value: 4, label: '报废' }]
  const formatterItem = itemOptions.find(item => {
    // 字符串和数字兼容设置
    return item.value === cellValue || item.value.toString() === cellValue || item.value === cellValue.toString()
  })
  return formatterItem === undefined ? cellValue : formatterItem.label
}

function inspectionStatusFormatter(row,column,cellValue,index) {
  const itemOptions= [{value:0,label:'未检验'},{value:1,label:'合格'},{value:2,label:'不合格'}]
  const formatterItem = itemOptions.find(item => {
    // 字符串和数字兼容设置
    return item.value === cellValue || item.value.toString() === cellValue || item.value === cellValue.toString()
  })

  return formatterItem === undefined ? cellValue : formatterItem.label
}

module.exports = {
  dateFormatter,
  datetimeFormatter,
  dictionaryFormatter,
  whetherFormatter,
  enableFormatter,
  equipmentStatusFormatter,
  inspectionStatusFormatter
}

再main.js中统一注册:

 

import formatters from '@/utils/formatter'
console.log(formatters,'formatters')
Object.keys(formatters).forEach(key => {
  //Vue.filter(key, formatters[key])
  // console.log(key,formatters[key])
  // console.log(key,'----')
  Vue.prototype[key] = formatters[key]
})

  Filter方法同样