在vue中格式化表格中的时间为指定格式

<el-table :data="tableData" style="width: 100%">
   <el-table-column label="日期" width="180">
        <template slot-scope="scope">
            <span>{{ scope.row.date | FormatDate('HH:mm:ss') }}</span>
        </template>
   </el-table-column>
   <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
</el-table>

    utils.formatDate = function(date, fmt) {
        date = new Date(date);
        if (typeof (fmt) === "undefined") {
            fmt = "yyyy-MM-dd HH:mm:ss";
        }
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'H+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + ''
                fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
            }
        }
        return fmt;
    };

 

 

<el-table-column

  prop="createTime"

  :formatter="dateFormat"

  label="创建时间">  

</el-table-column>

用 ':formatter' 来绑定 设置时间格式的方法 dateForma

2，在methods 中定义 dateForma

引入moment.js

import moment from 'moment'

methods:{

    dateForma:function(row,column){

        var date = row[column.property];

        if(date == undefined){return ''};

        return moment(date).format("YYYY-MM-DD HH:mm:ss")

    }

}
 

 

参考：  https://blog.csdn.net/qq_41402200/article/details/86476397

https://www.jianshu.com/p/97952b149687