使用echart表格显示数据,但是后台提供的时间为13位时间戳,显示在表格中也是时间戳,将时间戳转化为YYYY-MM-DD HH-MM-SS时间格式如下:
参考几种方法:

element-ui 表格数据时间格式化的方法
vue element-ui表格里时间戳转换成时间显示
vue 下使用element表单时间戳转日期
vue + element表格 时间戳转换

试错过程
方法①在vue中使用会报*.replace()*方法不是一个方法,应该是无法将链式结构识别出来,具体的原因我还没有找出来,有时间再看一下。
方法②是管用的,但是转换结果不标准,当数字为个位数时没有补0,与一系列数据放在一起会很不美观。
方法③使用了Moment工具库,我在导入库的时候失败了很多次,导致无法使用moment()方法,如果可以用的话将会非常简单。
方法④没有使用element-ui中表格的formatter方法,而是单独写了一个filter,不过里面的语法是没有问题的。
最终结果
我结合项目特点将方法③和方法④综合起来实现了时间格式化,以下为代码:

<el-table-column
      prop="checkTime"
      header-align="center"
      label="检测时间"
      show-overflow-tooltip
      width="200"
      align="center"
      :formatter="dateFormat"
></el-table-column>

注意
这个问题实在是错了还多太多太多遍了
写方法前面一定要加冒号!!!
写方法前面一定要加冒号!!!
写方法前面一定要加冒号!!!

下面的方法写在方法里面:

dateFormat(row, column) {
      var date = new Date(row.checkTime);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var d =
        date.getDate() < 10
          ? "0" + (date.getDate() + " ")
          : date.getDate() + " ";
      var h =
        date.getHours() < 10
          ? "0" + (date.getHours() + ":")
          : date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + (date.getMinutes() + ":")
          : date.getMinutes() + ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + d + h + m + s;
    }

JavaScript Date 对象

转换后的表现
2020-2-12 16:49:28

Logo

前往低代码交流专区

更多推荐