vue格式化element表格中的时间为指定格式

当我们使用 Vue 和 Element UI 框架来处理时间数据时，有时候需要将时间数据按照指定的格式进行格式化，这里提供几种解决方案：

1. 使用 Element UI Table 组件中的 scoped slot

在表格中创建一个名为“date”（可以自己命名）的范围插槽，然后将单元格样式修改相应的格式。

<el-table-column label="Date" width="150">
  <template slot-scope="scope">
    {{ new Date(scope.row.date).toLocaleString() }}
  </template>
</el-table-column>

上述代码中，我们使用了 JavaScript 内置方法 toLocaleString() 对 Date 时间对象进行格式化处理。

2. 使用 Moment.js 库进行时间格式化

Moment.js 是一个方便的库，我们可以使用它来格式化和操作日期时间。安装 Moment.js 的最简单方法是使用 npm：

npm install moment --save

安装完成后，我们可以在 Vue 组件中引用它：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="Date" width="180">
        <template slot-scope="scope">
          {{ moment(scope.row.date).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      tableData: [
        {id: 1, date: '2022-01-01T08:00:00.000Z'},
        {id: 2, date: '2022-01-03T10:00:00.000Z'},
        {id: 3, date: '2022-01-05T12:00:00.000Z'},
      ],
      moment: moment
    }
  },
}
</script>

第一组代码显示的日期格式为“10/14/2019, 2:09:18 PM”。如果你需要改变日期时间的格式，可以在 format() 方法中添加你需要格式化的格式字符串，如：moment(date).format('YYYY-MM-DD HH:mm:ss')。

另外，在实际项目中，我们也可以定义一个全局时间过滤器，在需要的页面引入即可。下面是一个时间过滤器（filters.js）的示例代码：

import moment from 'moment';

export default {
  date(value) {
    if (!value) return '';
    return moment(value).format('YYYY/MM/DD HH:mm:ss');
  },
};

在需要使用的 Vue 页面中，我们可以引入该时间过滤器，并在模板中使用。例如：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="Date" width="180">
        <template slot-scope="scope">
          {{ scope.row.date | date }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import filters from '@/utils/filters.js';

export default {
  filters,
  data() {
    return {
      tableData: [
        {id: 1, date: '2022-01-01T08:00:00.000Z'},
        {id: 2, date: '2022-01-03T10:00:00.000Z'},
        {id: 3, date: '2022-01-05T12:00:00.000Z'},
      ],
    }
  },
}
</script>

在实际开发中，你可以根据自己的需要选择相应的方案进行时间格式化。