vue3判断动态的列格式化日期

您可以使用 Vue 3 的计算属性来格式化日期。您可以在计算属性中检查列的名称，以确定要格式化的列，并使用 JavaScript 的 Date 对象以及日期格式化库（如 day.js 或 moment.js）来格式化日期。以下是一个示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column">
          {{ column }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="column in columns" :key="column">
          {{ formattedValue(item[column], column) }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John', dob: '1990-01-01' },
        { id: 2, name: 'Jane', dob: '1995-05-05' },
      ],
      columns: ['id', 'name', 'dob'],
      dateColumn: 'dob',
      dateFormat: 'YYYY-MM-DD',
    };
  },
  computed: {
    formattedItems() {
      return this.items.map(item => {
        const formattedItem = {};
        for (const key in item) {
          if (key === this.dateColumn) {
            formattedItem[key] = dayjs(item[key]).format(this.dateFormat);
          } else {
            formattedItem[key] = item[key];
          }
        }
        return formattedItem;
      });
    },
  },
  methods: {
    formattedValue(value, column) {
      if (column === this.dateColumn) {
        return dayjs(value).format(this.dateFormat);
      } else {
        return value;
      }
    },
  },
};
</script>

在这个示例中，我们首先定义了要格式化的列的名称和日期格式。然后，我们使用计算属性 `formattedItems` 来遍历每个项目并在需要时格式化日期。我们还定义了一个辅助方法 `formattedValue`，用于在渲染单元格时格式化单元格的值。