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 属性

                         <el-table-column
                            v-if=" stateTag == 0 "
                            prop="create_time"
                            :formatter="formatTime"
                            label="录入时间"
                            align="center"
                         ></el-table-column>

 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博客

猜你喜欢

转载自blog.csdn.net/weixin_42146585/article/details/119421346