vue格式化时间方法--moment

这篇博客介绍了如何在Vue.js项目中使用moment.js库进行时间格式化。包括下载安装、导入、方法编写以及封装成可复用的JS模块。提供了过滤秒、短时间、长时间、年月、时分秒等格式化函数,并展示了在表格和timePicker组件中的应用实例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、下载依赖

npm install moment --save

2、引入依赖

import moment from ‘moment’;

3、写入methods

//过滤秒:格式化时间

leaveTime(value)
{
  return moment(value).format('YYYY-MM-DD HH:mm');
},

4、封装成js直接使用(下次直接引入即可)

import moment from 'moment';

// 短时间
export const shortTime = function (value) {
    return moment(value).format('YYYY-MM-DD');
}

// 长时间
export const time = function (value) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
}

//过滤秒
export const leaveTime = function (value) {
    return moment(value).format('YYYY-MM-DD HH:mm');
}

// 年月
export const monthTime = function (value) {
    return moment(value).format('YYYY-MM');
}

// 时分秒
export const secondsTime = function (value) {
    return moment(value).format('HH:mm:ss');
}

// 中国标准时间的转化
export const filterTime = (time, type = 'short') => {
    if (type == 'short') {
        return moment(time).format('YYYY-MM-DD')
    } else {
        return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
}

export const startOfDate = function(d, dateType = 'day'){
    return moment(d).startOf(dateType)
}

export const endOfDate = function(d, dateType = 'day'){
    return moment(d).endOf(dateType)
}

// 当月第一天和最后一天   传入一个日期,返回数组['2019-12-01','2019-12-31']
export const lastDateofMonth = function (d) {
    let firstDate = moment(d).startOf('month').format('YYYY-MM-DD');
    let endDate = moment(d).endOf('month').format('YYYY-MM-DD');
    let Datearr = [];
    Datearr.push(firstDate);
    Datearr.push(endDate);
    return Datearr;
}


5、使用方法

引入js

import * as timeFormat from "../../../base/api/timeFormat";

在表格中使用

<el-table-column prop="createTime" label="创建时间" min-width="180">
  <template slot-scope="scope">
      {{leaveTime(scope.row.createTime)}}
    </template>
</el-table-column>

在timePicker中使用(无需引入对应方法)

 <el-date-picker
  :picker-options="pickerOptionsStart"
  v-model="filedParams.payStartDate"
  type="date"
  placeholder="请选择时间"
  value-format="yyyy-MM-dd"
  style="float: left; width: 48%"
>
</el-date-picker>

Vue 中使用 `el-table-column` 组件时格式化时间,可以通过模板插槽结合时间格式化工具库(如 `moment` 或 `dayjs`)实现。以下是一个完整的实现示例: ### 使用 `slot-scope` 和 `moment` 格式化时间 ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="createTime" label="时间" align="center"> <template slot-scope="scope"> {{ scope.row.createTime | formatDate }} </template> </el-table-column> </el-table> ``` 在组件的 `filters` 中定义一个过滤器来处理时间格式化逻辑: ```javascript filters: { formatDate(value) { return moment(value).format('YYYY-MM-DD HH:mm:ss'); } } ``` 上述方式利用了 Vue 的过滤器机制,并结合 `el-table-column` 的插槽功能实现了时间字段的格式化输出[^3]。 --- ### 动态列中格式化时间 如果使用动态列配置(如从 `dynamicColumns` 数据中生成列),可以在 `<template>` 中结合 `slot-scope` 实现: ```html <el-table-column v-for="(item, index) in dynamicColumns" :key="index" :prop="item.prop" > <template slot="header"> {{ item.label }} </template> <template slot-scope="scope"> <span v-if="item.type === 'time'"> {{ scope.row[item.prop] | formatDate }} </span> <span v-else> {{ scope.row[item.prop] }} </span> </template> </el-table-column> ``` 这种方式允许在不同类型的列中根据需要进行特定格式化处理,例如对时间类型的数据统一应用格式化规则[^3]。 --- ### 使用 `$moment()` 方法直接在模板中格式化时间 另一种方法是在模板中直接调用 `moment` 库的方法进行格式化: ```html <el-table-column prop="createTime" label="时间" align="center"> <template slot-scope="scope"> {{ $moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} </template> </el-table-column> ``` 该方式适用于不希望引入额外过滤器或封装复杂逻辑的小型项目[^1]。 --- ### 引入时间格式化库 为了使用 `moment` 或 `dayjs`,需要先安装并引入相关库: ```bash npm install moment # 或者 npm install dayjs ``` 然后在组件中导入并注册为实例方法或通过插件形式全局使用: ```javascript import moment from 'moment'; export default { filters: { formatDate(value) { return moment(value).format('YYYY-MM-DD HH:mm:ss'); } } } ``` --- ### 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值