欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue格式化element表格中的時間為指定格式

 更新時間:2022年05月03日 14:07:05   作者:恩婧  
這篇文章主要介紹了vue中格式化element表格中的時間為指定格式,需要的朋友可以參考下

在vue表格中如果直接綁定時間字段默認(rèn)顯示格式一般為:yyyy-MM-dd HH:mm:ss,但有時候只需要顯示 年月日 或者 時分秒,這時我們就可以用到過濾器(filter)

vue 基礎(chǔ)表格

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

這里把時間轉(zhuǎn)換成 年:月:日 格式

過濾器的定義方式

在 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);
});

over~

相關(guān)文章

  • vue中按鈕操作完刷新頁面的實(shí)現(xiàn)

    vue中按鈕操作完刷新頁面的實(shí)現(xiàn)

    這篇文章主要介紹了vue中按鈕操作完刷新頁面的實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue router2.0二級路由的簡單使用

    vue router2.0二級路由的簡單使用

    這篇文章主要為大家詳細(xì)介紹了vue router2.0二級路由的簡單使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 詳解VUE的狀態(tài)控制與延時加載刷新

    詳解VUE的狀態(tài)控制與延時加載刷新

    本篇文章主要介紹了詳解VUE的狀態(tài)控制與延時刷新,實(shí)例分析了數(shù)據(jù)延時到展示的時候再去刷新的技巧,有興趣的可以了解一下。
    2017-03-03
  • 詳解在Vue中使用TypeScript的一些思考(實(shí)踐)

    詳解在Vue中使用TypeScript的一些思考(實(shí)踐)

    這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實(shí)踐),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例

    treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2022-12-12
  • Vue3中無法為el-tree-select設(shè)置反選問題解析

    Vue3中無法為el-tree-select設(shè)置反選問題解析

    這篇文章主要介紹了Vue3中無法為el-tree-select設(shè)置反選問題分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果

    Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果

    本文主要介紹了Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • Vue3中實(shí)現(xiàn)歌詞滾動顯示效果

    Vue3中實(shí)現(xiàn)歌詞滾動顯示效果

    本文分享如何在Vue 3中實(shí)現(xiàn)一個簡單的歌詞滾動效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • Vue發(fā)布訂閱模式實(shí)現(xiàn)過程圖解

    Vue發(fā)布訂閱模式實(shí)現(xiàn)過程圖解

    這篇文章主要介紹了Vue發(fā)布訂閱模式實(shí)現(xiàn)過程圖解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-04-04
  • vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題

    vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題

    這篇文章主要介紹了vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論