广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue格式化element表格中的时间为指定格式
  • 800
分享到

vue格式化element表格中的时间为指定格式

2024-04-02 19:04:59 800人浏览 泡泡鱼
摘要

在Vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter) vu

Vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter)

vue 基础表格

<el-table :data="tableData" style="width: 100%">
   <el-table-column prop="date" label="日期" width="180"></el-table-column>
   <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
</el-table>

使用过滤器的写法

<el-table :data="tableData" style="width: 100%">
   <el-table-column label="日期" width="180">
        <template slot-scope="scope">
            <span>{{ scope.row.date | FORMatDate('HH:mm:ss') }}</span>
        </template>
   </el-table-column>
   <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
</el-table>

这里把时间转换成 年:月:日 格式

过滤器的定义方式

在 main.js 中定义一个时间过滤器

// main.js
function formatDate(date, fmt) {
  date = new Date(date);
  if (typeof(fmt) === "undefined") {
      fmt = "yyyy-MM-dd HH:mm:ss";
  }
  if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'H+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
  }
  for (let k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
      }
  }
  return fmt
};
 
//定义一个时间过滤器
Vue.filter("FormatDate", function(date, fmt) {
  return formatDate(date, fmt);
});

over~

--结束END--

本文标题: vue格式化element表格中的时间为指定格式

本文链接: https://www.lsjlt.com/news/147842.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue格式化element表格中的时间为指定格式
    在vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter) vu...
    99+
    2022-11-13
  • vue怎么格式化element表格中的时间为指定格式
    这篇文章主要介绍“vue怎么格式化element表格中的时间为指定格式”,在日常操作中,相信很多人在vue怎么格式化element表格中的时间为指定格式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么...
    99+
    2023-06-30
  • Python3时间戳转换为指定格式的日
    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换。所谓时间戳,就是从 1970年1月1日 00:00:00 到现在的秒数。原来我也写过关于python3里面如何进行时间转...
    99+
    2023-01-31
    转换为 格式 时间
  • Python转换时间戳为指定格式日期
    目录当前时间实例1:实例2:指定时间戳实例1:实例2:总结 我们将会启用到time库: 当前时间 实例1: import time # 获得当前时间时间戳 now = int(t...
    99+
    2022-11-12
  • golang中的时间格式化
    目录golang时间格式化科普 CST 含义GMT 和 UTC 的关系golang 格式化时间 yyyy-MM-dd固定值由来总结golang时间格式化 科普 CST 含义 CST:...
    99+
    2023-02-16
    golang时间格式化 golang格式化 go格式化时间
  • python中time模块指定格式时间字符串转为时间戳
    本文章可以解决任意字符串格式时间转为时间戳 返回json格式 可以在此基础上进行修改 时间格式控制符 说明 %Y 四位数的年份,取值范围为0001~9999,如1900%m 月份(0...
    99+
    2023-02-27
    python 时间字符串转为时间戳 python 字符串转为时间戳
  • postgresql中的时间戳格式化
    目录postgresql时间戳格式化postgresql中时间戳格式转化常识另附表一张总结postgresql时间戳格式化 平时总记不住pg里面怎么将时间戳格式化,记录常用的格式化时...
    99+
    2023-03-21
    postgresq格式化时间戳l 时间戳格式化 postgresql时间戳
  • vue时间格式化的示例分析
    这篇文章给大家分享的是有关vue时间格式化的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享。expo...
    99+
    2022-10-19
  • 关于vue中的时间格式转化问题
    目录vue时间格式转化问题1. 效果图2. 需求:前台展示一律用的时间规格vue转换时间格式(适用于uni-app)1. 前端获取实时时间2. 运用过滤...
    99+
    2022-11-13
  • MySQL中怎么格式化时间
    这篇文章给大家介绍MySQL中怎么格式化时间,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据。用法select...
    99+
    2022-10-18
  • Java新API的时间格式化
    目录新API的时间格式化本地化时间ISO/RFC规范格式范式格式化前言: 时间过得真是快,现在已经是2022年了。作为开发来说,时间处理是非常繁琐的。从Java 8开始有了Java&...
    99+
    2022-11-13
  • 怎么在vue中利用Moment格式化时间
    这期内容当中小编将会给大家带来有关怎么在vue中利用Moment格式化时间,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。使用npm命令安装momentnpm install momen...
    99+
    2023-06-15
  • vue中常见的时间格式转换
    项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 1、将2020-06-27T14:20:27.000000Z 时间格式转换成 2...
    99+
    2022-11-13
  • php怎么将秒转化为时间格式
    本教程操作环境:Windows7系统、PHP8.1版、Dell G3电脑。php怎么将秒转化为时间格式php- 秒的转换 (天 小时 分钟) (小时 分钟 )php 秒 转换为 天 小时 分钟 小时 分钟代码如下:private funct...
    99+
    2022-11-21
    php
  • php如何将秒转化为时间格式
    这篇“php如何将秒转化为时间格式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php如何将秒转化为时间格式”文章吧。php...
    99+
    2023-07-04
  • vue中如何将日期转换为指定的格式
    目录vue将日期转换为指定的格式方案一方案二vue时间格式总结及转换获取当前时间时间格式之间的转换vue将日期转换为指定的格式 方案一 这个方法是我觉得特别好用的: 写一个转换日期的...
    99+
    2022-11-13
  • 怎么在PHP中将时间格式化为中文
    这篇文章主要介绍了怎么在PHP中将时间格式化为中文的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么在PHP中将时间格式化为中文文章都会有所收获,下面我们一起来看看吧。PHP中的时间函数PHP中有很多日期和时间...
    99+
    2023-07-05
  • go语言中gorm时间格式化
    GORM自带的time.Time类型JSON默认输出RFC3339Nano格式的,但是如果想改为yyyy-MM-dd HH:mm:ss形式的时间格式,需要定制MarshalJSON了...
    99+
    2023-03-07
    gorm时间格式化 go时间格式化
  • js中时间戳格式化成日期格式的方法有哪些
    这篇文章将为大家详细讲解有关js中时间戳格式化成日期格式的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。js需要把时间戳转为为普通格式,一般的情况下可能用不到的...
    99+
    2022-10-19
  • java中的实体类时间格式化
    目录实体类时间格式化java 实体类 时间格式化注解实体类时间类型属性常用注解注解一:DateTimeFormt(入参格式化)注解二:JsonFormt(出参格式化)注解三:JSON...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作