Vue使用ElementUI的表格进行日期格式化,变成自己想要的格式

导读:本篇文章讲解 Vue使用ElementUI的表格进行日期格式化,变成自己想要的格式,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、需求

作为一个后端开发者,被领导安排写了一些前端页面,可谓是难受啊,特别是100%按照设计图进行还原.要命了!!!

– 设计图日期如下
在这里插入图片描述
– 后端接口返回日期
在这里插入图片描述

二、解决方案

– 页面展示

<el-table>
	<el-table-column prop="ctime" :label="$t('spare.ctime')"
      :formatter="formatDateC"><!-- 添加一个格式化函数-->
    </el-table-column>
</el-table>

– 函数处理

//时间格式化
formatDateC (row) {
   // 获取单元格数据
   let datac = row.ctime
   let dtc = new Date(datac)
   //获取月,默认月份从0开始
   let dtuMonth = dtc.getMonth() + 1
   //获取日
   let dtuDay = dtc.getDate()
   //处理1-9月前面加0
   if (dtuMonth < 10) {
     dtuMonth = "0" + (dtc.getMonth() + 1)
   }
   //处理1-9天前面加0
   if (dtuDay < 10) {
     dtuDay = "0" + dtc.getDate()
   }
   //获取小时
   let dtuHours = dtc.getHours()
   //处理1-9时前面加0
   if (dtuHours < 10) {
     dtuHours = "0" + dtc.getHours()
   }
   //获取分钟
   let dtuMinutes = dtc.getMinutes()
   //处理1-9分前面加0
   if (dtuMinutes < 10) {
     dtuMinutes = "0" + dtc.getMinutes()
   }
   //获取秒
   let dtuSeconds = dtc.getSeconds()
   //处理1-9秒前面加0
   if (dtuSeconds < 10) {
     dtuSeconds = "0" + dtc.getSeconds()
   }
   //组装年月日时分秒,按自己的要求来
   return dtc.getFullYear() + "/" + dtuMonth + "/" + dtuDay
     //+ " " + dtuHours + ":" + dtuMinutes + ":" + dtuSeconds
 },

三、总结

觉得帮到您的点赞关注走一走,一起学习一起进步!!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/85260.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!