el-table-column 中怎么过滤后台来的毫秒数

Question

<el-table-column
   property ="CreateTime"
   label="发送时间"
   width=400>
</el-table-column>

Answer 1

有两种方法来实现，第一种是写一个过滤器（filter），使用插值替换，第二种是使用一个方法来处理。
推荐第一种，复用性强。

---

第一种，定义过滤器。

定义一个过滤器，将时间处理成到时分秒的时间：

Vue.filter('dateTimeFormat', (value) => {
    var time = new Date(+value);
    var rightTwo = (v) => {
      v = '0' + v
      return v.substring(v.length - 2, v.length)
    }
    if (time == null) return;
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var date = time.getDate();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    return year + '-' + rightTwo(month) + '-' + rightTwo(date) + ' ' + rightTwo(hours) + ':' + rightTwo(minutes) + ':' + rightTwo(seconds);
}

组件里怎么使用：

<el-table-column
    property ="CreateTime"
    label="发送时间"
    width=400>
    <template scope="scope">
        {{ scope.row.CreateTime | dateTimeFormat }}
    </template>
</el-table-column>

---

第二种，使用函数来处理。这个函数的逻辑跟过滤器是一样的，只是方式不同。

methods: {
    dateTimeFormat(value) {
        var time = new Date(+value);
        var rightTwo = (v) => {
          v = '0' + v
          return v.substring(v.length - 2, v.length)
        }
        if (time == null) return;
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        return year + '-' + rightTwo(month) + '-' + rightTwo(date) + ' ' + rightTwo(hours) + ':' + rightTwo(minutes) + ':' + rightTwo(seconds);
    }
}

组件里怎么使用：

<el-table-column
    property ="CreateTime"
    label="发送时间"
    width=400>
    <template scope="scope">
        {{ dateTimeFormat(scope.row.CreateTime) }}
    </template>
</el-table-column>

---

由于第一种方法可以将过滤器设置到全局，所以可以只定义一次，然后项目中可任意使用。