前端项目将毫秒数转换为日期格式

最新推荐文章于 2024-02-27 16:43:48 发布

Ccoolor

最新推荐文章于 2024-02-27 16:43:48 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/as965874/article/details/112978636

版权

js 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue应用中通过两种方法实现全局日期格式化，一是直接使用自定义filter，二是借助moment.js插件。实例演示了如何在el-table中展示时间戳并格式化为'年-月-日时:分:秒'。

摘要由CSDN通过智能技术生成

方法一：在main.js里面注册全局过滤器
1.在main.js里面注册全局过滤器

Vue.filter('dateFormat', function (originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  //时间格式年月日、时分秒
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

2.在页面中使用

<template>
	<el-table
      height="74%"
      border
      highlight-current-row
      :default-sort="{ prop: 'plantStationUpdateTime', order: 'descending' }"
      :data="tableData"
      style="border-bottom: 1px solid black"
      @selection-change="selectChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        type="index"
        width="60"
        align="center"
        :index="(queryInfo.num - 1) * queryInfo.pagesize + 1"
      ></el-table-column>
      <el-table-column label="时间" prop="create_time">
        <template>{{ timeStamp | dateFormat }}</template>
      </el-table-column>
    </el-table>
 </template>
 
<script>
export default {
  data() {
    return {
      timeStamp: new Date(),
    }
  },
}
</script>

方法二：使用moment.js插件
1.下载moment插件

npm install moment --save   # npm

2.在main.js里面注册


import moment from 'moment'

// 将时间戳转换为日期格式
Vue.filter('dateFormat', (datestr, patten = 'YYYY-MM-DD HH:mm:ss') => {
  return moment(datestr).format(patten)
})

3.在页面中使用

<template>
	<el-table
      height="74%"
      border
      highlight-current-row
      :default-sort="{ prop: 'plantStationUpdateTime', order: 'descending' }"
      :data="tableData"
      style="border-bottom: 1px solid black"
      @selection-change="selectChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        type="index"
        width="60"
        align="center"
        :index="(queryInfo.num - 1) * queryInfo.pagesize + 1"
      ></el-table-column>
      <el-table-column label="时间" prop="create_time">
        <template>{{ timeStamp | dateFormat }}</template>
      </el-table-column>
    </el-table>
 </template>
 
<script>
export default {
  data() {
    return {
      timeStamp: new Date(),
    }
  },
}
</script>