使用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;
}
轉換後的表現
2020-2-12 16:49:28