要对一列日期进行格式化。可使用formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。
参阅element官网
在el-table-column中使用formatter 属性绑定一个方法。我这里方法 名为formatter

 <el-table :data="listdata">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column>
<template #default="scope"
><el-popover
placement="top-start"
:title="scope.row.packName"
:width="200"
trigger="hover"
>
<el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>
<template #reference>
<el-image
class="list-image"
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="packName" label="图片包货号"></el-table-column>
<el-table-column prop="createDateTime" label="上传时间" :formatter="formatter"></el-table-column>
<el-table-column prop="updateDateTime" label="修改时间" :formatter="formatter"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template #default="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"
>查看</el-button
>
<el-button type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>

定义好formatter方法会传入两个参数:row和column

import { formatDate } from "../utils/formatter";
formatter(row,column)
{
return formatDate('YYYY-mm-dd HH:MM',row[column.property]);
}

我把日期处理的js封装成了共用的js。考虑到再其他的地方有可能还会使用到

export function formatDate(fmt,datestr)
{
var date = new Date(datestr);
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加,必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}

【element】el-table-column日期格式化的更多相关文章

  1. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  2. SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型

    SQL 横转竖 .竖专横 (转载)   普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 ...

  3. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  4. VUE:过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  5. MySQL 日期格式化,取年月日等相关操作

    日期取年.月.日 select id, phone,time,year(time),month(time), DAY(time),TIME(time) from user where phone='x ...

  6. 常用SQL之日期格式化和查询重复数据

    本文列举一些工作中常用的SQL,以提升工作效率. 1 日期格式化 使用 DATE_FORMAT(get_date, '%Y-%m-%d') 函数进行格式化.其中:get_date 是需要被格式化的字段 ...

  7. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  8. 日期格式化时注解@DateTimeFormat无效的问题分析

    作者:汤圆 个人博客:javalover.cc 背景 有时候我们在写接口时,需要把前台传来的日期String类型转为Date类型 这时我们可能会用到@DateTimeFormat注解 在请求数据为非J ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  10. Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...

随机推荐

  1. vivo 全球商城:电商平台通用取货码设计

    vivo官网商城开发团队 - Zhou Longjian 一.背景 随着O2O线上线下业务的不断扩展,电商平台也在逐步完善交易侧相关的产品功能.在最近的需求版本中,业务方为进一步提升用户的使用体验,规 ...

  2. [Python]-pdb模块-单步调试

    使用pdb模块辅助python调试. import pdb 断点模式 在需要调试的语句前设置断点,加入这行代码: pdb.set_trace() 程序运行到这就会进入断点调试模式. 输入 作用 n 运 ...

  3. CentOS 7.7系统安装Redis 6.0.3

    前提操作 避免出现如下的错误 yum -y install gcc tcl yum -y install centos-release-scl yum -y install devtoolset-9- ...

  4. My life of Honker Security Commando

    红客突击队 && 红客突击分队 红客突击队,于2019年,由队长k龙联合国内多位顶尖高校研究生牵头成立.其团队从成立至今多次参加国际网络安全竞赛并取得良好成绩,积累了丰富的竞赛经验.团 ...

  5. STM32F10x SPL V3.6.2 集成 FreeRTOS v202112

    STM32F10x SPL 集成 FreeRTOS 在整理 GCC Arm 工具链的Bluepill代码示例, 常用外设都差不多了, 接下来是 FreeRTOS, 网上查到的基本上都是基于旧版本的集成 ...

  6. PHP全栈开发(八):CSS Ⅲ background

    设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色 设置背景图片: body { backgr ...

  7. 洛谷P2886 [USACO07NOV]Cow Relays G (矩阵乘法与路径问题)

    本题就是求两点间只经过n条边的最短路径,定义广义的矩阵乘法,就是把普通的矩阵乘法从求和改成了取最小值,把内部相乘改成了相加. 代码包含三个内容:广义矩阵乘法,矩阵快速幂,离散化: 1 #include ...

  8. 齐博x1 直播神器聊天小插件

    下载地址如下:https://down.php168.com/livemsg.rar 本插件由论坛网友笨熊提供 非常感谢他给大家提供那么一个非常好用的直播必备神器. 如下图所示,大家在直播的时候,这个 ...

  9. 齐博x1再来个抛砖引玉 内容页根据关键词调用相关内容 新功能哦!

    昨天升级了一个隐藏的功能,今天就简单的做个说明怎么用,反正也不能浪费不是 那就用内容页面关键词读取相关内容为例吧. 前台是你模型中已经存在keywords字段  关键词支持 空格分割,号分割 那么就开 ...

  10. JWT中token的理解

    今天我们来聊一聊关于JWT授权的事情. JWT:Json Web Token.顾名思义,它是一种在Web中,使用Json来进行Token授权的方案. 既然没有找好密码,token是如何解决信任问题的呢 ...