在vue template模板{{xxx}}中的数据进行格式化处理

项目中常常需要在tempalte模板中使用函数或其它函数包直接对模板内的后端接口数据进行处理。而将数据中的某个字段统一筛出来后再处理又太麻烦。

故用到了vue中的filters过滤器对template模板中的时间直接进行过滤格式化。

这里以Vue格式化日期为例。

后台返回格式化前的日期：

filters过滤处理后的日期：

上代码：

<template>
  <div class="contain">
    <div class="tableArea">
      <el-table v-loading="loading" :data="tableData" stripe>

        <el-table-column prop="createTime" label="数据日期" min-width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | createformat() }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="updateTime" label="上传时间" min-width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.updateTime | updateformat() }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import tips from '../../components/tips';

export default {
  filters: {
    createformat(val) {
      return moment(val).format('YYYY/MM/DD');
    },
    updateformat(val) {
      return moment(val).format('MM/DD HH:mm');
    },
  },
 
</script>