Vue3在Element UI 表格中自定义时间格式化显示

---

一、前言

在开发 Web 应用程序时，常常需要在表格中展示时间数据。Element UI 是一个流行的 Vue UI 组件库，它提供了一系列易于使用的表格组件，但是在展示时间数据时，默认的格式可能不符合你的需求。本文将介绍如何使用 Element UI 的自定义模板来格式化时间数据，以满足特定的展示需求。

1、准备工作

首先，确保你的项目已经集成了 Element UI。如果没有，你可以通过 npm 或 yarn 安装 Element Plus：

npm install element-plus --save
# 或者
yarn add element-plus

2、实现步骤

1. 引入 Element UI 组件

在你的 Vue 组件中引入 Element UI 的表格组件：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="时间" :formatter="formatDate"></el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';

const tableData = ref([
  { id: 1, date: '2024-05-25T12:00:00Z' },
  { id: 2, date: '2024-05-26T15:30:00Z' },
]);
</script>

2. 自定义时间格式化函数

在 <script setup> 区域中定义一个函数，用于将时间格式化为所需的格式：

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';

const tableData = ref([
  { id: 1, date: '2024-05-25T12:00:00Z' },
  { id: 2, date: '2024-05-26T15:30:00Z' },
]);

const formatDate = (row, column) => {
  const date = new Date(row[column.property]);
  return formatDateString(date);
};

const formatDateString = (date) => {
  // 格式化日期逻辑
};
</script>

3. 格式化日期逻辑

编写一个函数来格式化日期，以满足你的需求。例如，将日期格式化为 年-月-日-时-分-秒：

<script setup>
// 其他代码...

const formatDateString = (date) => {
  const year = date.getFullYear();
  const month = pad2(date.getMonth() + 1);
  const day = pad2(date.getDate());
  const hours = pad2(date.getHours());
  const minutes = pad2(date.getMinutes());
  const seconds = pad2(date.getSeconds());
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const pad2 = (number) => {
  return (number < 10 ? '0' : '') + number;
};
</script>

3、完整示例

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="时间" :formatter="formatDate"></el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';

const tableData = ref([
  { id: 1, date: '2024-05-25T12:00:00Z' },
  { id: 2, date: '2024-05-26T15:30:00Z' },
]);

const formatDate = (row, column) => {
  const date = new Date(row[column.property]);
  return formatDateString(date);
};

const formatDateString = (date) => {
  const year = date.getFullYear();
  const month = pad2(date.getMonth() + 1);
  const day = pad2(date.getDate());
  const hours = pad2(date.getHours());
  const minutes = pad2(date.getMinutes());
  const seconds = pad2(date.getSeconds());
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const pad2 = (number) => {
  return (number < 10 ? '0' : '') + number;
};
</script>

4、结论

通过自定义 formatter 函数，你可以轻松地在 Element UI 表格中格式化时间数据，以满足你的特定需求。这种灵活