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

在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~

赞 (0)

相关推荐

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • Vue实现开始时间和结束时间范围查询

    Vue实现开始时间和结束时间范围查询

    本文实例为大家分享了Vue实现开始时间和结束时间范围的查询方法,供大家参考,具体内容如下 效果图: 代码实现: OrderList.Vue <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="下单日期"> <a-range-picker size="large" format="

  • Vue时间轴 vue-light-timeline的用法说明

    轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); <template> <light-timeline :items='items'></light-timeline> </tem

  • ant-design-vue 时间选择器赋值默认时间的操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <div> <a-range-picker show-time format="YYYY/MM/DD HH:mm:ss" :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码 @change="onChangeTime" ><

  • vue时间转换的几种方式

    VUE 时间转换 做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,,前端有时候从后端拿到的时间不符合标准,此时就需要转换以后再去使用,转换有两种方式,看你个人比较喜欢哪一种.这里已时间转换为例子 过滤器filter 全局过滤器 在main.js写入 // 时间戳过滤器 Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr) function timeAdd0 (str) { if (str <

  • Vue 防止短时间内连续点击后多次触发请求的操作

    如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用disabled限制点击,感觉体验不是太好,所有给大家分享下面的方法 <el-button @click="throttle()">测试</el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } } } methods:{ throttle(){ //获取当前时间的时间戳 let now = new Dat

  • vue el-date-picker动态限制时间范围案例详解

    vue el-date-picker动态限制时间范围案例详解

    分为两种情况 1.开始时间和结束时间同一个框(限制只能本月) 2.开始时间和结束时间分开两个框(限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)  情况1 //情况1 原创版权声明:本文为weixin_40998880原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. //本文链接:https://blog.csdn.net/weixin_40998880/article/details/106272897 //html <el-date-picke

  • vue filter 完美时间日期格式的代码

    vue filter时间日期格式的实例代码如下所示: <template> <div>{{msg | compFilter('yyyy-MM-dd hh:mm') }}</div> </template> <script> export default { data() { return { msg: new Date() // msg: 10, } }, filters: { compFilter: function(value, format

  • vue 中常见的时间格式转换

    项目中后台返回的时间有多种形式,时间戳.ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 1.将2020-06-27T14:20:27.000000Z 时间格式转换成 2020-06-27 14:20:27 可以将方法定义为全局过滤器,或全局方法方便引用 Vue.filter('format', function(date) { var json_date = new Date(date).toJSON(); return new Date(new Date(json_date) +

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

    在vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter) vue 基础表格 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180&quo

  • vue实现element表格里表头信息提示功能(推荐)

    如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <el-tooltip effect="light" placement="le

  • Vue如何更改表格中的某一行选项值

    Vue如何更改表格中的某一行选项值

    如何更改表格中的某一行选项值 结合后端接口,进行相应的传参 Id, state值等,因相关组件库中的方法说明比较简单,有些需要自己去尝试,如下图中change()方法的传参等 //ajax发送请求的相关方法: get : 获取 , post: 新增 , put/patch : 更改, delete: 删除 代码实现 组件库中的方法介绍: 接口示例: 效果: 对table某一行的数据进行编辑,删除,查看详情操作 效果图 在html中需要对button按钮进行template包裹,scope.row

  • 深入理解MVC中的时间js格式化

    记录下我遇到的一个,MVC中post请求返回一个JSON字符串,其中包含数据库中的时间格式(如:/Date(10000000000)/),不知道怎么处理. 百度的方法都不适用,经自己研究,做成了一个Jquery插件,希望对大家有所帮助. 插件源代码: (function ($) { /格式化JSON返回的日期类型为自己定义的格式:如:yyyy-MM-dd hh:mm:ss dtstr:JSON返回的日期"/Date(10000000000)/" * fmt:自定义的格式,如:yyyy-

  • Java中Calendar时间操作常用方法详解

    本文实例为大家分享了Calendar时间操作常用方法,具体内容如下 package test; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; /** * Date和Calendar常用方法,Date很多方法已经弃用,因此以Calendar为主 * * @author tuzongxun123 * */ public class DateAndCalendarTest { p

  • Vue实现表格中对数据进行转换、处理的方法

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在Vue中,如果采用了element等组件,利用数据绑定的特性,也是很难对表格遍历的数据进行单独行的处理的. 我们这边取一个例子来说.比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的,为了用户更好的体验,势必需要对时间格式进行转换的. 下图是从mysql中默认取出的date

  • 关于element ui 表格中的常见特殊属性说明

    关于element ui 表格中的常见特殊属性说明

    目录 1,表格内容太多用…表示 2,修改element ui自带的样式 3,修改奇数行背景色 4,给表头添加背景色及文字样式 5,表头文字竖向排列(文字带括号) 6,表头边框与文本边框对不齐情况 7,导航栏的侧边栏只展开一个下拉菜单 8,表格表头和内容居中显示 9,添加表格背景色 10,鼠标移入表格高亮显示当前行 element ui 表格的常见特殊属性 1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字

  • vue element实现将表格单行数据导出为excel格式流程详解

    由于业务内容的需要,我们有时候需要将表格中的单行数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击单行导出按钮,导出数据为excel表格 如下图: 具体操作步骤如下: 1.下载按照依赖 npm install -D script-loader 2.在src文件夹的目录下方创建两个js文件 (1):Blob.js (2):Export2Excel.js 如下图: (Blob.js) (function (v

  • Flex中对表格中某列的值进行数字格式化保留两位小数

    Flex中对表格中某列的值进行数字格式化保留两位小数

    1.问题背景 一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="libr

  • vue如何将v-for中的表格导出来

    一.需要安装以下依赖 npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. 三.在.vue文件中      写这两个方法:其中list是表格的内容 //export2Excel是你点击导出所绑定的方法名 export2Excel() { require.ensure([], () => { const {

随机推荐