vue el-table-column日期格式化

2021-02-19 乐帮网

javascript vuejs

在Vue的框架element-ui下，绑定日期的字段时需要指定格式，一般我们会指定格式yyyy-MM-dd hh:mm:ss ，可以使用el-table-column中的formatter属性来指定格式化输出。代码如下：

 <el-table-column
          prop="LoginTime"
          width="180"
          label="登录日期"
          header-align="center"
          align="center"
          :formatter="formatDate"
        ></el-table-column>

其中的数据列LoginTime必须为日期类型，格式化函数要放到Vue数据体的methods当中，代码如下：

 methods: {
formatDate:function(row, column){
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let date = new Date(data);
    var o = { 
        "M+" : date.getMonth()+1,                 //月份 
        "d+" : date.getDate(),                    //日 
        "h+" : date.getHours(),                   //小时 
        "m+" : date.getMinutes(),                 //分 
        "s+" : date.getSeconds(),                 //秒 
        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
        "S"  : date.getMilliseconds()             //毫秒 
    }; 
   var fmt = "yyyy-MM-dd hh:mm:ss";
  if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
      return fmt ;
    }
}

就是这么简单，如果想要其它的日期格式可以把fmt改成自己的格式。

本文链接

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力