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>

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