问题描述:

前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ?

方法一:

elementUI中的table提供了formatter这个属性来对传入的数据进行用户自定义的格式化

<el-table-column show-overflow-tooltip prop="crteTime" :formatter="formatDate" label="创建时间" min-width="150" align="center" />
formatDate(row, column) {function addDateZero(num) {return (num < 10 ? "0" + num : num);}let d = new Date(row.crteTime);let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());return formatdatetime; //返回给前台页面的值
}

方法二:

在此列上添加template,显示的内容调用函数parseDateFull,参数为后台返回的时间。

<el-table-columnlabel="处理时间"align="center"prop="clsj"width="180"
><template slot-scope="scope"><span>{{ parseDateFull(scope.row.clsj) }}</span></template>
</el-table-column>
//然后定义函数parseDateFull的实现
parseDateFull(time) {var x = new Date(time);var z = {y: x.getFullYear(),M: x.getMonth() + 1,d: x.getDate(),h: x.getHours(),m: x.getMinutes(),s: x.getSeconds(),};if (z.M < 10) {z.M = "0" + z.M;}if (z.d < 10) {z.d = "0" + z.d;}if (z.h < 10) {z.h = "0" + z.h;}if (z.m < 10) {z.m = "0" + z.m;}return z.y + "-" + z.M + "-" + z.d + " " + z.h + ":" + z.m ;}

方法三:

在遍历的时候执行一个函数,将后台返回的毫秒数转换为指定的格式显示:

<el-table-columnlabel="处理时间"align="center"prop="time"width="180"
><template slot-scope="scope"><span>{{time | formateDate1}}</span></template>
</el-table-column>
/*转换时间格式*/
filters:{//如下这样写//转换时间格式formateDate1(time){ var datetime = timefunction addDateZero(num) {return (num < 10 ? "0" + num : num);}let d = new Date(datetime);let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());if(datetime){return formatdatetime; //返回给前台页面的值}}},

elementUI中table中自定义修改时间格式2020-10-26T10:00:00相关推荐

  1. layui数据表格自定义复选框表头_layui中table表头样式修改方法

    如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...

  2. layui表头样式_layui中table表头样式修改方法

    如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...

  3. layui表头样式_js相关:layui中table表头样式修改方法

    js相关:layui中table表头样式修改方法 发布于 2020-7-25| 复制链接 分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...

  4. layui设置表格表头字体_layui中table表头样式修改方法

    如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...

  5. 微信小程序中苹果iOS手机显示时间格式NaN不正确的问题

    项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息 问题描述 微信小程序中苹果iOS手机显示时间格式NaN不正确的问题 原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...

  6. elementui在table中使用el-popover删除操作

    elementui在table中使用el-popover删除操作 .vue <el-table-column label="操作" width="120" ...

  7. vue+elementui 项目 table表格自定义排序规则

    vue+elementui 项目 table表格自定义排序规则 官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...

  8. 模板皮肤AnotherEon001中日历css自定义修改

    web页面中很多地方都会用到日历显示,选择等,本文用html.css实现简单的日历.完成以后的效果和我自己觉得还不错,可以切换上个月.下个月.也可以根据实际情况进行扩展.当然需要你自己动手了,本篇 ...

  9. excel表数据导入数据库mysql中,并解决导入时间格式问题

    1.准备好Excel表数据 id category_id category_pid title art_desc content imageurl tags   create_time   3 1 E ...

最新文章

  1. 公司CRM的三个阶段
  2. sixth week:third work
  3. 应用案例:SequoiaDB+Spark搭建医院临床知识库系统
  4. 【渝粤教育】广东开放大学 原画设计 形成性考核 (23)
  5. STM32的IAP在线升级的源码中的地址解读
  6. iOS:位置相关(18-03-09更)
  7. Python零基础入门(零)——Anaconda安装(python安装)和使用
  8. Git使用教程:超详细、超傻瓜、超浅显、真正手把手教
  9. 【数据结构和算法笔记】二叉树和树/森林的相互转换
  10. Posix多线程编程学习笔记
  11. 易点汽车租赁服务器无响应,全部服务器无响应!!!
  12. 对象数组 —— 学生信息表
  13. asp big5 gb2312 转 Unicode
  14. 高通推出通过以太网供电的小型蜂窝芯片
  15. acdream 1201 SuSu's Power dp
  16. R语言案例分析:多元数据的基本统计分析
  17. Android客户端和Java服务器端集成支付宝
  18. SuperMap Desktop制作地图
  19. jvm设置http代理
  20. Android studio调取支付宝健康码

热门文章

  1. NetBeans 时事通讯(刊号 # 51 - Apr 07, 2009)
  2. redis 分布式中间件设计分析
  3. 分布式流控介绍和实现原理
  4. 几款比较工具Beyond compare、DiffMerge、WinMerge
  5. matlab工具箱使用50hz低通滤波器设计 和FFT 变化截取50hz工频信号幅值
  6. c程序设计语言读书笔记,C程序设计语言读书笔记
  7. q函数表格怎么看_会计表格函数玩不会?送你会计表格函数公式大全,财务人都在用...
  8. 微信公众号-关注取消关注后图文和普通消息自动回复
  9. Jquery第二章appendTo方法到方法的使用练习第二节
  10. Mybatis(动态SQL大全)