【elementui时间格式化显示】前端页面获取后端返回的数据，数据中存在Date类型的数据，需要将返回的事件格式化展示在页面上

前言

前端页面获取后端返回的数据，数据中存在Date类型的数据，需要将返回的事件格式化展示在页面上。

---

一、实现

在item中通过 formatter 做格式化方法调用：

{
	label: '搭建时间',
	prop: 'createTime',
    align: 'center',
    formatter: (row, cel, val) => {
     	return this.dateFormatter(row, cel, val);
    }
}

具体方法代码如下：

/**
       * 时间显示格式化
       * @param row
       * @param cel
       * @param val
       * @returns {string}
       */
        dateFormatter(row, cel, val) {
        // 定义事件格式
            let format = 'YY-mm-dd HH:MM:SS';
            // 根据事件格式创建 Date
            const date = new Date(val);
            const datas = {
                'Y+': date.getFullYear().toString(),
                'm+': (date.getMonth() + 1).toString(),
                'd+': date.getDate().toString(),
                'H+': date.getHours().toString(),
                'M+': date.getMinutes().toString(),
                'S+': date.getSeconds().toString()
            };
            Object.keys(datas ).forEach((item) => {
                const result= new RegExp(`(${item})`).exec(format);
                if (result) {
                    format = format.replace(result[1], result[1].length === 1 ? datas [item] : datas [item].padStart(result[1].length, '0'));
                }
            });
            return format;
        },