vue中时间格式转化问题

快来打我* 2023-02-11 11:25 199阅读 0赞

1. 效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70][]

2. 需求：前台展示一律用的时间规格：yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0，这样显得整体化一。所以下面就是专门对月日时分秒小于10时做补0的处理，实际刚开始想到的就是直接挨个判断月日时分秒<10时，直接拼接0的想法，被同事打断了，这个方法太繁琐了。所以发现了以下简洁的方法，据说是es6中的函数用法，还没有去具体查询出处，先用着再说吧。接下来分析代码.

可以把它写在一个单独的js中，这样就可以写在公共方法里，大家都可以调用的那种，当然也可以写在你需要地方的方法里，按照自己的实际情况来

①写在公共方法里

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 1][]

代码部门：

其中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中调用一下，设置为全局的，这样大家就都可以用了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 2][]

然后在vue页面进行调用图：

:formatter="formatDate"

formatDate就是设置为全局方法的方法名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 3][]

②将它只是变为局部的格式化时间调用，那么就需要把格式化时间的代码放在调用页面的方法中

一下这个方法只需要放在本页面的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了。

图示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200523152029877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200523152833937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200523153828293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020052315401428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200523154808355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ==,size_16,color_FFFFFF,t_70