echart表格中日期格式化

使用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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章