在vue中格式化表格中的时间为指定格式

朴灿烈づ我的快乐病毒、 2022-04-22 15:52 321阅读 0赞

> 在vue表格中如果直接绑定时间字段默认显示格式一般为：yyyy-MM-dd HH:mm:ss，但有时候只需要显示 年月日 或者 时分秒，这时我们就可以用到过滤器（filter）

**vue 基础表格**

<el-table :data="tableData" style="width: 100%">
       <el-table-column prop="date" label="日期" width="180"></el-table-column>
       <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
    </el-table>

**使用过滤器的写法**

<el-table :data="tableData" style="width: 100%">
       <el-table-column label="日期" width="180">
            <template slot-scope="scope">
                <span>{
       { scope.row.date | FormatDate('HH:mm:ss') }}</span>
            </template>
       </el-table-column>
       <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
    </el-table>

*  这里把时间转换成 时:分:秒 格式

**过滤器的定义方式 **

**   ① 在 main.js 中定义一个时间过滤器**

// main.js
    function formatDate(date, fmt) {
      date = new Date(date);
      if (typeof(fmt) === "undefined") {
          fmt = "yyyy-MM-dd HH:mm:ss";
      }
      if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
      }
      for (let k in o) {
          if (new RegExp(`(${k})`).test(fmt)) {
              let str = o[k] + ''
              fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
          }
      }
      return fmt
    };
    
    //定义一个时间过滤器
    Vue.filter("FormatDate", function(date, fmt) {
      return formatDate(date, fmt);
    });

**   ② 在专门写过滤器文件中定义**

// filters/index.js
    export function FormatDate(date, fmt) {
        date = new Date(date);
        if (typeof(fmt) === "undefined") {
            fmt = "yyyy-MM-dd HH:mm:ss";
        }
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'H+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + ''
                fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
            }
        }
        return fmt
    }
    
    
    // main.js
    import * as filters from './filters'
    
    // 全局注册所有自定义的过滤器
    Object.keys(filters).forEach(key => {
      Vue.filter(key, filters[key])
    })

### 注： ###

*  **main.js ：框架默认配置的情况下，当你运行npm run dev的时候，main.js 这个入口文件就开始执行了。即 main.js 文件是最先执行的**
 *  **如果用第一种写法，写在 main.js 中，那么 .vue 页面中就可以直接使用**
 *  **如果用第二种写法，则必须引入 filters 文件夹下的 index.js 文件（可以放在 main.js 中统一 import 引入，或者在单个需要用到的 .vue 文件中 import 引入）**

> **欢迎来访[我的vue专栏总篇][vue]博客**

希望能够帮助到你

over

[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947