vue之过滤器

NOTICE：过滤器写在标签中时时没有参数的。

1、将从后台获取的数据是数字转换成文字

<el-table-column v-if="NameListOfOutConfig.includes('状态')" label="状态" align="center" width="80">
  <template slot-scope="scope">{{ scope.row.status | statusChange }}</template>
</el-table-column>

statusChange(status) {
  if (status == '0') {
    return '待审核'
  } else if (status == '1') {
    return '审核通过'
  } else if (status == '2') {
    return '审核驳回'
  }
},

2、将从后台获取的日期格式化

<el-table-column v-if="NameListOfOutConfig.includes('有效期至')" label="有效期至" align="center">
  <template slot-scope="scope">{{ scope.row.expireDate| formatDate }}</template>
</el-table-column>
formatDate(time) {
  if (time == null || time == '') {
    return ''
  }
  var date = new Date(time)
  return formatDateNew(date, 'yyyy-MM-dd')
},
export function formatDateNew(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  const o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours()
  }
  for (const k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      const str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}

3、时间戳

import { parseTime } from '@/utils'

parseTime(time) {
  if (time == null) {
    return ''
  }
  return parseTime(time)
},

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (('' + time).length === 10) time = parseInt(time) * 1000
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

4、格式化重量

<el-table-column label="储备重量" align="center">
  <template slot-scope="scope">{{ scope.row.storeWt |formatterNumber }}</template>
</el-table-column>

formatterNumber(number) {
  return Number(Number(number).toFixed(3))
}

5、类型转换

<el-table-column v-if="NameListOfOutConfig.includes('来源')" label="来源" align="center" width="60">
  <template slot-scope="scope">{{ scope.row.isErp | isERPChange }}</template>
</el-table-column>

isERPChange(isErp) {
    // 0.新建1.已发货2.已收货3.退货4.已入库5.已备货6.已确认7.部分退货9.已作废
    if (isErp == 0) {
        return 'excel';
    } else if (isErp == 1) {
        return 'erp';
    }
}

转换方式二：

<el-table-column label="类型" fixed align="center" width="120px">
　　<template slot-scope="scope">{{ scope.row.traceType | typeFilter }}</template>
</el-table-column>

const typeOptions = [
  { value: 1, label: '成品' },
  { value: 2, label: '浸膏' },
  { value: 3, label: '饮片' },
  { value: 4, label: '药材' }]
const typeMap = typeOptions.reduce((acc, cur) => {
  acc[cur.value] = cur.label
  return acc
}, {})

filters: {
  typeFilter(status) {
    return typeMap[status]
  }
},

注意：acc是数组，cur为item

6、数量+单位

<el-table-column v-if="NameListOfOutConfig.includes('入库数量')" label="入库数量" align="center" >
  <template slot-scope="scope">{{ (scope.row.lineType == "2" ? formatNumUnit(scope.row.importNum , scope.row.uom) : "") }}</template>
</el-table-column>

formatNumUnit(num, uom) {
  let fmt = ''
  if (!num || num == null || num === '') {
    return ''
  } else {
    fmt = num + (uom == null ? '' : uom)
    fmt = fmt.replace('-', '')
  }
  return fmt
}

注意：由于涉及到判断，就将formatNumUnit写成方法，不是过滤器，写在methods中，如果不涉及判断则可以写成过滤器

 如果计量单位确定，过滤器代码如下：

<mt-cell title="" value="">
  <span slot="title">完工数量：</span>
  <span>{{ parent.extractNum| formatUnit }}</span>
</mt-cell>

formatUnit(item) {
  if (item == null || item == undefined || item == '0' || item == 0) {
    return ''
  } else {
    return item + 'kg'
  }
},

7、校验不能输入空格

以下能校验中间不输入空格，如果不想让前边和后边不输入空格，那么使用v-model.trim

const validateBatchNo = (rule, value, callback) => {
        if (value === '' || value === undefined) {
          callback(new Error('请输入批号'))
        }
        const reg = /^[a-zA-Z0-9]*$/
        if (!reg.test(value)) {
          callback(new Error('提示：请不要使用特殊字符'))
        } else {
          callback()
        }
      }