el-table日期格式化处理2种方式

在Element UI中，el-table组件可以通过formatter属性来格式化日期。这里有两种方式来实现日期格式化：

1. 全局方法：

   定义一个全局方法来格式化日期，然后在el-table-column的formatter属性中引用这个方法。

// 全局方法
function dateFormatter(row, column, cellValue) {
  if (cellValue) {
    return moment(cellValue).format('YYYY-MM-DD'); // 使用moment.js格式化日期
  } else {
    return '--';
  }
}
 
// Vue组件中
export default {
  // ...
  methods: {
    dateFormatter // 引用全局方法
  }
}

<el-table-column
  prop="date"
  label="日期"
  :formatter="dateFormatter"
></el-table-column>

2. 局部方法：

   直接在Vue组件的methods中定义一个方法来格式化日期。

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

export default {
  // ...
  methods: {
    formatDate(row, column, cellValue) {
      if (cellValue) {
        return moment(cellValue).format('YYYY-MM-DD'); // 使用moment.js格式化日期
      } else {
        return '--';
      }
    }
  }
}

注意：这里假设你已经安装并在项目中使用了moment.js来处理日期。如果不使用moment.js，你可以使用原生JavaScript的Date对象和Intl.DateTimeFormat来格式化日期。