Vue使用ElementUI的表格进行日期格式化,变成自己想要的格式

在Vue中使用ElementUI的表格组件时，可以通过格式化函数来自定义日期的显示格式。以下是一个简单的例子，展示如何在ElementUI的表格中实现日期格式化：

1. 首先确保你已经安装并引入了ElementUI。
2. 在你的Vue组件中，定义一个格式化日期的方法：

export default {
  methods: {
    formatDate(row, column) {
      const date = row[column.property];
      if (date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      }
      return 'N/A';
    }
  }
}

3. 在模板中，使用这个方法作为formatter属性的值，来格式化日期列：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 其他列 -->
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      :formatter="formatDate">
    </el-table-column>
  </el-table>
</template>

4. 在你的数据中，确保tableData包含了一个有效的date属性，它是一个JavaScript Date对象。

data() {
  return {
    tableData: [
      {
        date: new Date(), // 这里的日期将被formatDate方法格式化
        // 其他数据...
      },
      // 更多行...
    ]
  };
}

以上代码将会把日期列格式化为YYYY-MM-DD的格式。你可以根据需要修改formatDate方法，来生成不同的日期格式。