element-ui 表格数据时间格式化的方法（无插件）

最新推荐文章于 2024-05-25 15:13:23 发布

原创最新推荐文章于 2024-05-25 15:13:23 发布 · 8.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

VUE 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了el-table列表中时间格式数据的格式化操作。当列表包含时间数据时，可在列中绑定formatter属性进行格式化，格式为'yyyy-MM-dd'。若表格使用了插槽，formatter方法失效，此时可用filter过滤器解决。

该文章已生成可运行项目，

使用场景：

当el-table 的列表中包含时间格式的数据，对其进行格式化操作；

效果：

格式化为 'yyyy-MM-dd' 形式；

操作步骤：

在列中绑定formatter 该属性

其中dateFormat是格式化操作的逻辑；过滤出需要格式化的列的prop即可


    /**
     * @description: 格式化日期
     * @param {*} row
     * @param {*} column
     * @return {*}
     * @author: greatwang
     */
    dateFormat(row, column) {
      if (column.property === 'releaseTime' || column.property === 'trainingStarttime' || column.property === 'trainingEndtime') {
//       返回格式化的列
        return row[column.property].substring(0,10)
      }else{
//       返回不需要惊醒格式化列源
        return row[column.property]
      }
    },

另一种场景：

如果在表格中使用了插槽，那么上述的formatter方法会不起作用；

解决方法：使用filter 过滤器进行格式化

代码片：

  filters: {
    /**
     * @description: 格式化日期
     * @param {*} val
     * @return {*}
     * @author: greatwang
     */
    dateFormat(val) {
      //       返回不需要惊醒格式化列源
      return val.substring(0,10)
    }
  },

本文章已经生成可运行项目