Vue全局过滤器

最新推荐文章于 2022-01-17 11:26:10 发布

伯恩dadi

最新推荐文章于 2022-01-17 11:26:10 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/boenwan/article/details/102953437

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建并使用全局过滤器，以`getLabelFromListByValue`为例，展示了在视图组件（view.vue）中如何通过过滤器处理数据，从选项列表中获取对应的标签值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter.js

import Vue from 'vue'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

Vue.filter('NumberFormat', function(value) {
  if (!value) {
    return '0'
  }
  const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  return intPartFormat
})

Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

Vue.filter('momentFormat', function(data, pattern = 'YYYY-MM-DD') {
  if (data != null && data !== '' && data !== 'Invalid date') {
    return moment(data).format(pattern)
  } else {
    return ''
  }
})

/**
 * 从列表中获取对应的值
 * value:如果value是list,则返回、拼接的字符
 * list:列表项需要包括value与label属性,形如[{value:1,label:是}]
 */
Vue.filter('getLabelFromListByValue', function(value, list) {
  if (value === undefined) {
    return ''
  }
  if (list === undefined) {
    return ''
  }
  let valueStr = value + '' // 如果value是int则转成str,用于处理接口返回int,字典项key是string
  let target = [].concat(valueStr)
  if (valueStr.indexOf(',') > -1) {
    target = valueStr.split(',')
  }
  // 如果是树形结构,则循环取值,否则逗号拼接
  if (list.length === 0 || list[0]['children'] === undefined) {
    let result = list.filter(item => target.includes(item.value + ''))
    return result ? result.map(item => item.label).join('、') : ''
  } else {
    let result = ''
    let flatList = flat(list)
    for (let i = 0; i < target.length; i++) {
      let temp = flatList.filter(item => target[i] === item.value + '')
      if (temp.length !== 0) {
        if (result === '') {
          result = temp[0].label
        } else {
          result = result + '/' + temp[0].label
        }
      }
    }
    return result
  }
})

function flat(list) {
  // 自己
  let flatList = [].concat(f(list))
  // 下级
  for (let i = 0; i < list.length; i++) {
    let children = list[i].children
    if (children !== undefined && children !== null) {
      // 自己
      flatList = flatList.concat(f(children))
      // 下级
      for (let j = 0; j < children.length; j++) {
        let childrenchildren = children[j].children
        if (childrenchildren !== undefined && childrenchildren !== null) {
          // 自己
          flatList = flatList.concat(f(childrenchildren))
        }
      }
    }
  }
  return flatList
}

function f(list) {
  return list.map(t => {
    return { label: t.label, value: t.value }
  })
}