element 表格处理后端返回的时间格式，Table 表格使用formatter 属性

项目场景：

有时我们在项目中后端返回给我们的时间数据格式（2021-08-04T14:39:47.939）并不是我们最终想要展示的样子，显示的效果不好，这时候我们就需要对返回过来的时间数据进行初始化处理，来达到最终的展示效果（2021-08-04 14:39:47）。

后端返回的时间数据展示效果：

---

 解决方案：

期初是想引入moment.js 插件，绑定处理时间格式的方法，来专门进行时间戳转化，虽说可以实现最终的效果，但是考虑到需要下载安装插件……

通过在对 Element UI 中的Table 表格的使用中发现 formatter 属性，可以用于格式化指定列的值，接受一个 Function ，会传入两个参数：row 和 colum ，可以根据自己的需要进行处理。免去安装配置moment.js的操作，效率和性能更高一点。

 

操作步骤：

1、在绑定时间这一列的 el-table-column 的属性栏中添加 formatter 属性

 2、在 methods 中定义这个属性的函数方法，并对时间格式进行相应格式的处理（此处只是我这边需要的时间数据格式，具体的格式处理你们要根据自己的需求来定，原理相通，问题都不大）

                   // 时间格式化
                   formatTime(row, column){
                     let data = row[column.property]
                     let dtime = new Date(data)
                     const year = dtime.getFullYear()
                     let month = dtime.getMonth() + 1
                     if (month < 10) {
                       month = '0' + month
                     }
                     let day = dtime.getDate()
                     if (day < 10) {
                       day = '0' + day
                     }
                     let hour = dtime.getHours()
                     if (hour < 10) {
                       hour = '0' + hour
                     }
                     let minute = dtime.getMinutes()
                     if (minute < 10) {
                       minute = '0' + minute
                     }
                     let second = dtime.getSeconds()
                     if (second < 10) {
                       second = '0' + second
                     }
                     return year+ '-' + month+ '-' + day + ' ' + hour + ':' + minute + ':' + second
                   },

 3、然后跑一下，效果就出来了，还是很不错的，达到了预期

---

以下是相关的时间处理文章，欢迎交流，希望对你有所帮助！！！

日期时间选择器“快捷选项”：element DateTimePicker 日期时间选择器，针对接口返回的特定时间数据做“快捷时间范围选项”处理_樂途途的博客-CSDN博客_picker.$emit('pick

简单计时器效果的实现：JavaScript简单倒计时效果的实现_樂途途的博客-CSDN博客