使用element-ui 表格后台返回数据时间格式化的方法（无插件）

最新推荐文章于 2023-09-09 09:37:21 发布

老张代码

最新推荐文章于 2023-09-09 09:37:21 发布

阅读量854

点赞数 1

分类专栏： js vue element-ui 文章标签： vue html js elementui

本文链接：https://blog.csdn.net/weixin_45721912/article/details/116482396

版权

vue 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

element-ui

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Element-UI的formatter属性对后台返回的不友好时间数据进行初始化和格式化。通过在时间属性中添加formatter方法，将原始数据转换为易读的日期和时间格式，例如'YYYY-MM-DD HH:mm:ss'。这种方法可以改善用户界面的显示效果，使得时间信息更加清晰。完成这些步骤后，时间数据将展示得更加美观和易于理解。

摘要由CSDN通过智能技术生成

有时候后台返回的时间数据是这样的：

后台返回数据
这个时候显示很不方便而且还不太好看我们需要对他做一个初始化的操作，我们需要在时间这一个属性栏中加一个属性，formatter 如下图：

加入属性
这个属性是element-ui中用来初始化数据的一个属性，如下图显示：
属性描述
然后定义这个属性，

  methods: {
      formatDate(row, column){
    let data = row[column.property]
    let dt = new Date(data)
    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
},
}

完成后如图下所示：
完成后操作