vue-element表格table组件，获取的值为时间戳，转为日期时间格式

最新推荐文章于 2022-11-04 15:14:20 发布

原创最新推荐文章于 2022-11-04 15:14:20 发布 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

vue-element 专栏收录该内容

16 篇文章

订阅专栏

本文展示了如何在Vue项目中安装和使用npm包Moment.js，将创建时间以'YYYY-MM-DD HH:mm:ss'格式展示在表格中。通过在main.js中全局引入Moment.js并赋值给Vue原型，然后在表格的`formatter`方法中调用Moment.js的format函数进行日期格式化。

1，安装npm i moment --save
2，在main.js中引用，并赋值

import moment from "moment";
Vue.prototype.$moment = moment;

3，在页面使用

<template>
<el-table
      :data="tableData"
      height="73vh"
      stripe
      tooltip-effect="dark"
      style="width: 100%"
      highlight-current-row
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
    <el-table-column
        prop="createtime"
        label="创建时间"
        :formatter="dateFormat"
      ></el-table-column>
      </el-table>
</template>
<script>
export default {
  data() {
	    return {
	      tableData: [],//表格数据
	      }
      	},
        methods: {
		    //时间格式化
		    dateFormat: function(row, column) {
		      var date = row[column.property];
		      return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
		    },
    	}
     }
  </script>