首页 > 其他分享 >vue3 el-table-column 修改时间格式

vue3 el-table-column 修改时间格式

时间:2023-04-11 10:59:30浏览次数:52  
标签:el 格式化 column vue3 let time table row

根据element文档说明,el-table中的el-table-column 是可以使用 formatter 格式化时间的。

 

 先添加 绑定函数 formatter 

<el-table-column prop="createdTimeFormat" :formatter="dateFormat" label="日期" width="170"></el-table-column>

 新建格式化时间的函数

//时间格式化
const dateFormat =  (row) => {
    let time = new Date(row.createdTime)// row 表示一行数据, createdTime 表示要格式化的字段名称
    if(!time){
        return ''
    }
    let year = time.getFullYear()
    let month = dateIfAddZero(time.getMonth()+1)
    let day = dateIfAddZero(time.getDate())
    return year + '-' + month + '-' + day+ ' '
}

const dateIfAddZero = (time) => {
    return time < 10 ? '0'+ time : time
}

最后就大功告成

 

 

标签:el,格式化,column,vue3,let,time,table,row
From: https://www.cnblogs.com/wjm956/p/17305439.html

相关文章

  • vue 预览PDF、Docx、EXCEL文件
      <template><divclass="contentArea"><divclass="fileContainer"ref="fileDiv"v-if="$route.query.fileName.indexOf('docx')!==-1"></div><divclass="f......
  • 在浏览器和node中使用 GitHub的js-xlsx库进行Excel文件处理(一)
    1.简介js-xlsx库是目前Github上star数量最多的处理Excel的库,功能强大,提供了各种对表格的操作,但是这个项目文档有些乱,提供的demo也只具备最基本的功能。Demo地址:http://oss.sheetjs.com/js-xlsxGithub上源码地址:http://git.io/xlsx支持解析的格式有:Excel2007+XML......
  • ASEMI代理AD8603AUJZ-REEL7原装ADI车规级AD8603AUJZ-REEL7
    编辑:llASEMI代理AD8603AUJZ-REEL7原装ADI车规级AD8603AUJZ-REEL7型号:AD8603AUJZ-REEL7品牌:ADI/亚德诺封装:SOT-23-5批号:2023+安装类型:表面贴装型引脚数量:5类型:车规级芯片AD8603AUJZ-REEL7特性低失调电压:50μV(最大值)低输入偏置电流:1pA(最大值)单电源供电:1.8V至5V......
  • Andorid NoSuchFieldError: No static field D of type I in class Lx/x/x/R$layout解
    一、介绍我们在开发过程中,会出现各种问题,包括布局资源的问题,但是这种布局几乎是和资源有关,出现这种情况有以下三种1.资源冲突资源冲突,最右可能造成的原因是两个不同的module拥有相同的layout名字,这就会导致在打包的时候,如果别的module优先被处理,占据了有利先机,而你的资源可能被别人......
  • ZR.Admin小改和VUE3版本体验
    前言孔乙己显出极高兴的样子,将两个指头的长指甲敲着柜台,点头说:“对呀,对呀!......回字有四样写法,你知道么?”大家好,我是44岁的大龄程序员码农阿峰。阿峰从事编程二十年了,虽然没有成为架构师,却也用过很多种架构。几年前开始研究JAVA企业级快速开发框架若依,后来发现了它的.net版本......
  • Django 同一Model注册多个modelAdmin
    需求:同一个djangomodel模型,根据不同需求展示注册到admin.py中classUserMsg(models.Model):username=models.CharField(max_length=20,null=False,verbose_name='发送方')hername=models.CharField(max_length=20,null=True,verbose_name='对方姓名')ti......
  • 安装 selenium
    安装 selenium查看谷歌版本  Chrome驱动下载地址(跟谷歌版本一定要对上):  http://chromedriver.storage.googleapis.com/index.html    下载好以后   放入项目的根目录  创建文件并安装引入selenium  打开浏览器百度网站案例#1.导入froms......
  • python3写csv中文文件,可以直接excel打开
    写出python3代码:将如下数据转为windowsexcel文件。 importcsvdata=[[1010205,'2022/11/23','R染(Inception)攻击','T89','在远程系统的启动文件登录后可以自动执行恶意脚本或可执行文件。','例:copyrogramData\Microsoft\W\Programs\StartUp',4,85,......
  • 前端 - 解决el-table 无限拉伸问题
    解决el-table无限拉伸问题设置表格的max-height<el-tableborder:data="tableData"max-height="500px">上一步设置成功后,在浏览器缩放条件下仍然存在无限拉伸的问题,这时需要做自适应::v-deep.el-table{width:100%;.el-table__header-wrapperta......
  • el-table树形数据与懒加载
    <template><divclass="page"><divclass="page-box"><h3style="margin-top:0">类目/榜单管理</h3><el-inputplaceholder="请输入关键字"v-model="keyWord"style="......