数据格式化

预置数据格式化函数

parseTime

将时间戳/日期对象格式化为由 formatString 参数指定格式。

参数	说明	默认值
value*	[Timestamp|DateObject] 原数据	无
formatString	[String] 格式配置 {y}年 {m}月 {d}日 {h}时 {i}分 {s}秒 例：{y}-{m}-{d}	{y}-{m}-{d} {h}:{i}:{s}

formatTime

将时间戳格式化为人性化时间描述/格式：如果时间戳距离当前小于 2 天，则格式化为形如 刚刚 5分钟前 2小时前 等人性化描述；反之将自动调用 parseTime 函数进行格式化。

参数	说明	默认值
value*	[Timestamp] 原数据	无
formatString	同 parseTime 函数参数	{y}-{m}-{d} {h}:{i}:{s}

timeAgo

将时间戳格式化为距离当前时间的分钟、小时、天数。例：20 分钟 3 小时 5 天。

参数	说明	默认值
value*	[Timestamp] 原数据	无

numberFormatter

将大数按数量级缩短并补充数量级单位，单位列表：K M G T P E。例：100000 转为 100K。

参数	说明	默认值
value*	[Number] 原数据	无
digits	[Number] 保留小数位数	0

uppercaseFirst

将字母组成的字符串(单词)首字母大写。例：word 转为 Word。

参数	说明	默认值
value*	[String] 原数据	无

formatPrice

将数字按千分位格式化为每三位插入逗号格式。例：1925345.64 转为 1,925,345.64。

参数	说明	默认值
value*	[Number] 原数据	无

formatString

按指定位数间隔向字符串中依次插入指定字符，例：2234791342 转为 2234 7913 42。默认从左到右每四位插入一个空格。

参数	说明	默认值
value*	[String] 原数据	无
options	[Object] 格式化参数 参数形式： {   length: 4, // [Number] 分段位数，默认为 4   spacer: ' ', // [String] 间隔符，默认为空格   ltr: true // [Boolean] 字符插入方向，默认 true }	{length: 4, spacer: '', ltr: true}

stringSplice

字符串截取，支持按照长度、起始位置、截取方向、替换字符配置。例：201903301600001 转为 #00001。

参数	说明	默认值
value*	[String] 原数据	无
length	[Number] 截取长度	无
options	[Object] 字符串截取参数 参数形式： {   // [Boolean] 是否从左至右，默认 true   ltr: true,   // [Number] 开始截取的位置，如果 ltr 为   false，则其应为负值，从 -1 开始   start: 0,   // [Boolean] 替换符，默认为空字符。被裁   剪掉的内容将被替换为指定的字符串   replace: '' }	{ltr: true, start: 0, replace: ''}

fixNumber

数字保留小数位数。支持宽松模式，即如果当前数字的小数位数少于 digits 参数设置，将不被处理。多余小数位数按四舍五入处理。例：123.456 转为 123.46。

参数	说明	默认值
value*	[Number] 原数据	无
digits	[Number] 保留小数位数	无
looseMode	[Boolean] 是否宽松模式	false

TIP

函数第一个参数，即上述参数列表中的 value 参数，在用到通用列表字段配置的 formatter 属性或用作 vue 过滤器 时缺省，无需再次传入。

通用列表中的用法

可以通过在通用列表字段的配置中增加 format 属性进行设置，format 配置参考 列字段 format 配置。

使用示例

<template>
  <page class="filter-table-demo" class-name="hw100">
    <panel
      :title-fixed="true"
      title="表具详述"
      class="h100 w-2-1"
    >
      <common-table
        :columns="columns"
        :list="data"
        class="p15 pb0"
      />
    </panel>
  </page>
</template>

<script>
export default {
  data () {
    return {
      data: [],
      columns: [{
        label: '安装日期',
        field: 'installDate',
        // 将时间戳格式化为 年-月-日 形式
        format: {
          type: 'parseTime',
          // 通过 set 属性传入参数
          set: '{y}-{m}-{d}'
        },
        align: 'right'
      }, {
        label: '在用状态',
        field: 'meterStatus',
        // 自定义格式化函数
        format: {
          type: 'custom',
          // 通过 set 属性指定自定义数据格式化加工函数
          set: data => {
            return {
              0: '待安装',
              1: '已安装',
              2: '未用',
              3: '在用'
            }[data]
          }
        },
        align: 'right'
      }]
    }
  },
  methods: {
    rowSelect (val) {
      console.info('row select =>', val)
    }
  }
}
</script>

用作 vue 数据过滤器

上述格式化函数已注册为 vue 实例全局过滤器，可以直接以过滤器的方法进行应用。具体用法请参考 vue 官方文档过滤器 (opens new window)。

使用示例

<template>
  <div>
    <!-- 价格保留两位小数 -->
    <p>价格：{{ price | fixNumber(2) }}￥</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 125.324
    }
  }
}
</script>