vue table列表时间格式化

lanren312

已于 2022-06-24 09:48:06 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-06-14 23:05:11 首次发布

本文链接：https://blog.csdn.net/lanren312/article/details/125287970

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客分享了两种JavaScript方法来格式化日期和时间，适用于显示在表格和普通文本中的活动时间。第一种方法利用`<el-table>`组件和自定义的`formatDate`及`activityTime`方法，第二种方法直接在模板中使用`formateDateTime`方法格式化创建时间。这些方法有助于在前端展示清晰易读的时间信息。

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

效果图，直接上代码

<el-table :data="tableData">
	<el-table-column prop="activityTime" :formatter='activityTime' label="活动时间">
	</el-table-column>
</el-table>


methods: {
	formatDate (date) {
		var date1 = new Date(date);
		var myyear = date1.getFullYear();
		var mymonth = date1.getMonth() + 1;
		var myweekday = date1.getDate();

		if (mymonth < 10) {
			mymonth = "0" + mymonth;
		}
		if (myweekday < 10) {
			myweekday = "0" + myweekday;
		}
		return myyear + "-" + mymonth + "-" + myweekday;
	},
	activityTime (row) {
		const that = this;  // 这个也是重点
		if (row.startTime != null && row.endTime != null) {
			return that.formatDate(row.startTime) + "/" + that.formatDate(row.endTime);
		} else {
			return "";
		}
	},
 
}

第二种：

<span>时间：</span><span>{{formateDateTime(row.creatime)}}</span>
methods: {
  formateDateTime (value) {
	if (value == null) {
	  return ''
	} else {
	  let date = new Date(value)
	  let y = date.getFullYear() // 年
	  let MM = date.getMonth() + 1 // 月
	  MM = MM < 10 ? ('0' + MM) : MM
	  let d = date.getDate() // 日
	  d = d < 10 ? ('0' + d) : d
	  let h = date.getHours() // 时
	  // h = h < 10 ? ('0' + h) : h
	  // let m = date.getMinutes()// 分
	  // m = m < 10 ? ('0' + m) : m
	  // let s = date.getSeconds()// 秒
	  // s = s < 10 ? ('0' + s) : s
	  // return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
	  return y + '-' + MM + '-' + d 
	}
  }
}

希望对你有用