Vue数据时间格式化的方法

Vue数据时间格式化的方法

准备：1、安装moment：npm install moment --save
2、导入：import moment from ‘moment‘;
一、 表格列数据时间格式化

<el-table :data="tableData" stripe >
			<el-table-column prop="applyTime" label="提交日期" :formatter="formatDate">
			</el-table-column>
</el-table>

在methods方法中写：

			//时间格式化
			formatDate: function(row, column) {
				var date = row[column.property];
				if(date == undefined) {
					return "";
				}
//				return moment(date).format("YYYY-MM-DD HH:mm:ss");
				return moment(date).format("YYYY-MM-DD");
			}

结果：

``
二、在过滤器中使用
1、template模板使用：

<p class="time">{{item.updateTime | formatDate}}</p>

2、过滤器

filters: {
	/*
	 时间格式自定义 只需把字符串里面的改成自己所需的格式
	*/
	formatDate:function(date) {
		return moment(date).format("YYYY-MM-DD");
	}
}

3、结果：

备注：1、转为中文

		filters: {
	/*
	 时间格式自定义 只需把字符串里面的改成自己所需的格式
	*/
	formatDate:function(date) {
		moment.locale('zh-cn');
		return moment(date).format("YYYY年MM月DD日 hh:mm:ss dddd");
	}
},

2、将时间转换为某时间前

		filters: {
			/*
			 时间格式自定义 只需把字符串里面的改成自己所需的格式
			*/
			Date: function(date) {
//				return moment(date).format("YYYY-MM-DD");
				moment.locale('zh-cn');
				return moment(date,"YYYYMMDD").fromNow();
				
				
			}
		}