elementUI中table中自定义修改时间格式2020-10-26T10:00:00
问题描述:
前端使用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相关推荐
- layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
- layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
- layui表头样式_js相关:layui中table表头样式修改方法
js相关:layui中table表头样式修改方法 发布于 2020-7-25| 复制链接 分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
- layui设置表格表头字体_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
- 微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息 问题描述 微信小程序中苹果iOS手机显示时间格式NaN不正确的问题 原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
- elementui在table中使用el-popover删除操作
elementui在table中使用el-popover删除操作 .vue <el-table-column label="操作" width="120" ...
- vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则 官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
- 模板皮肤AnotherEon001中日历css自定义修改
web页面中很多地方都会用到日历显示,选择等,本文用html.css实现简单的日历.完成以后的效果和我自己觉得还不错,可以切换上个月.下个月.也可以根据实际情况进行扩展.当然需要你自己动手了,本篇 ...
- excel表数据导入数据库mysql中,并解决导入时间格式问题
1.准备好Excel表数据 id category_id category_pid title art_desc content imageurl tags create_time 3 1 E ...
最新文章
- 公司CRM的三个阶段
- sixth week:third work
- 应用案例:SequoiaDB+Spark搭建医院临床知识库系统
- 【渝粤教育】广东开放大学 原画设计 形成性考核 (23)
- STM32的IAP在线升级的源码中的地址解读
- iOS:位置相关(18-03-09更)
- Python零基础入门(零)——Anaconda安装(python安装)和使用
- Git使用教程:超详细、超傻瓜、超浅显、真正手把手教
- 【数据结构和算法笔记】二叉树和树/森林的相互转换
- Posix多线程编程学习笔记
- 易点汽车租赁服务器无响应,全部服务器无响应!!!
- 对象数组 —— 学生信息表
- asp big5 gb2312 转 Unicode
- 高通推出通过以太网供电的小型蜂窝芯片
- acdream 1201 SuSu's Power dp
- R语言案例分析:多元数据的基本统计分析
- Android客户端和Java服务器端集成支付宝
- SuperMap Desktop制作地图
- jvm设置http代理
- Android studio调取支付宝健康码
热门文章
- NetBeans 时事通讯(刊号 # 51 - Apr 07, 2009)
- redis 分布式中间件设计分析
- 分布式流控介绍和实现原理
- 几款比较工具Beyond compare、DiffMerge、WinMerge
- matlab工具箱使用50hz低通滤波器设计 和FFT 变化截取50hz工频信号幅值
- c程序设计语言读书笔记,C程序设计语言读书笔记
- q函数表格怎么看_会计表格函数玩不会?送你会计表格函数公式大全,财务人都在用...
- 微信公众号-关注取消关注后图文和普通消息自动回复
- Jquery第二章appendTo方法到方法的使用练习第二节
- Mybatis(动态SQL大全)