vue中時間格式轉化問題

    1. 效果圖：

  

    2. 需求：前臺展示一律用的時間規格：yyyy-MM-dd HH:mm:SS,即要求月日時分秒小於兩位數的都要補0，這樣顯得整體化一。所以下面就是專門對月日時分秒小於10時做補0的處理，實際剛開始想到的就是直接挨個判斷月日時分秒<10時，直接拼接0的想法，被同事打斷了，這個方法太繁瑣了。所以發現了以下簡潔的方法，據說是es6中的函數用法，還沒有去具體查詢出處，先用着再說吧。接下來分析代碼.

     可以把它寫在一個單獨的js中，這樣就可以寫在公共方法裏，大家都可以調用的那種，當然也可以寫在你需要地方的方法裏，按照自己的實際情況來

      ①寫在公共方法裏

        可以在工具文件夾底下新建一個data.js，如下：

   代碼部門：

其中Vue.prototype是將formatDate這個方法設置問全局方法，這樣就都可以調用了，注意方法名名爲formatDate，後面用

/**
 * Created by syp on 2020/5/15.
 */

exports.install = function (Vue, options) {
  Vue.prototype.formatDate = function (row, column) {
    let data = row[column.property]
    if (data == null) {
      return null
    }
    let dt = new Date(data)
    let yyyy = dt.getFullYear()
    let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
    let dd = dt.getDate().toString().padStart(2, '0')
    let h = dt.getHours().toString().padStart(2, '0')
    let m = dt.getMinutes().toString().padStart(2, '0')
    let s = dt.getSeconds().toString().padStart(2, '0')
    return yyyy + '-' + MM + '-' + dd + ' ' + h + ':' + m + ':' + s
  }
}

  處理好data.js後,再在公共js中調用一下，設置爲全局的，這樣大家就都可以用了

然後在vue頁面進行調用圖：

:formatter="formatDate"

formatDate就是設置爲全局方法的方法名 

   ②將它只是變爲局部的格式化時間調用，那麼就需要把格式化時間的代碼放在調用頁面的方法中

一下這個方法只需要放在本頁面的method底下就好了

formatDate (row, column) {
        let data = row[column.property]
        if (data == null) {
          return null
        }
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
      },

在列表展示的熟悉中運用和上面一樣都用:formatter="formatDate"就ok了。

圖示：