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

 更新时间:2022年05月03日 14:07:05   作者:恩婧  
这篇文章主要介绍了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~

相关文章

  • vue+echarts图表的基本使用步骤总结

    vue+echarts图表的基本使用步骤总结

    这篇文章主要给大家介绍了关于vue+echarts图表的基本使用步骤,Echarts是一款基于JavaScript的开源可视化图表库,而Vue是一种流行的JavaScript框架,用于构建用户界,需要的朋友可以参考下
    2023-11-11
  • vue-upload上传图片详细使用方法

    vue-upload上传图片详细使用方法

    这篇文章主要介绍了使用vue-upload上传图片的详细使用说明,文中有相关的代码示例供大家参考,感兴趣的小伙伴一起跟着小编来学习吧
    2023-05-05
  • vue背景图片路径问题及解决

    vue背景图片路径问题及解决

    这篇文章主要介绍了vue背景图片路径问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vuex模块化和命名空间namespaced实例演示

    Vuex模块化和命名空间namespaced实例演示

    这篇文章主要介绍了Vuex模块化和命名空间namespaced的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • Vue项目npm操作npm run serve或npm run dev报错及二者的区别

    Vue项目npm操作npm run serve或npm run dev报错及二者

    这篇文章主要介绍了Vue项目npm操作npm run serve或npm run dev报错及二者的区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 在Vant的基础上封装下拉日期控件的代码示例

    在Vant的基础上封装下拉日期控件的代码示例

    这篇文章主要介绍了在Vant的基础上封装下拉日期控件的代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue父元素点击事件与子元素点击事件冲突问题

    vue父元素点击事件与子元素点击事件冲突问题

    这篇文章主要介绍了vue父元素点击事件与子元素点击事件冲突问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue ElementUI的from表单实现登录效果的示例

    vue ElementUI的from表单实现登录效果的示例

    本文主要介绍了vue ElementUI的from表单实现登录效果的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue2.0 与 bootstrap datetimepicker的结合使用实例

    vue2.0 与 bootstrap datetimepicker的结合使用实例

    本篇文章主要介绍了vue2.0 与 bootstrap datetimepicker的结合使用实例,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • vue如何查找数组中符合条件的对象

    vue如何查找数组中符合条件的对象

    这篇文章主要介绍了vue如何查找数组中符合条件的对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论