Vue3在Element UI 表格中自定義時間格式化顯示

Vue3在Element UI 表格中自定義時間格式化顯示

  • 一、前言
    • 1、準備工作
    • 2、實現步驟
      • 1. 引入 Element UI 組件
      • 2. 自定義時間格式化函數
      • 3. 格式化日期邏輯
    • 3、完整示例
    • 4、結論


一、前言

在開發 Web 應用程序時,常常需要在表格中展示時間數據。Element UI 是一個流行的 Vue UI 組件庫,它提供了一系列易于使用的表格組件,但是在展示時間數據時,默認的格式可能不符合你的需求。本文將介紹如何使用 Element UI 的自定義模板來格式化時間數據,以滿足特定的展示需求。

1、準備工作

首先,確保你的項目已經集成了 Element UI。如果沒有,你可以通過 npm 或 yarn 安裝 Element Plus:

npm install element-plus --save
# 或者
yarn add element-plus

2、實現步驟

1. 引入 Element UI 組件

在你的 Vue 組件中引入 Element UI 的表格組件:

<template><el-table :data="tableData"><el-table-column prop="date" label="時間" :formatter="formatDate"></el-table-column></el-table>
</template><script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';const tableData = ref([{ id: 1, date: '2024-05-25T12:00:00Z' },{ id: 2, date: '2024-05-26T15:30:00Z' },
]);
</script>

2. 自定義時間格式化函數

<script setup> 區域中定義一個函數,用于將時間格式化為所需的格式:

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';const tableData = ref([{ id: 1, date: '2024-05-25T12:00:00Z' },{ id: 2, date: '2024-05-26T15:30:00Z' },
]);const formatDate = (row, column) => {const date = new Date(row[column.property]);return formatDateString(date);
};const formatDateString = (date) => {// 格式化日期邏輯
};
</script>

3. 格式化日期邏輯

編寫一個函數來格式化日期,以滿足你的需求。例如,將日期格式化為 年-月-日-時-分-秒

<script setup>
// 其他代碼...const formatDateString = (date) => {const year = date.getFullYear();const month = pad2(date.getMonth() + 1);const day = pad2(date.getDate());const hours = pad2(date.getHours());const minutes = pad2(date.getMinutes());const seconds = pad2(date.getSeconds());return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};const pad2 = (number) => {return (number < 10 ? '0' : '') + number;
};
</script>

3、完整示例

<template><el-table :data="tableData"><el-table-column prop="date" label="時間" :formatter="formatDate"></el-table-column></el-table>
</template><script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';const tableData = ref([{ id: 1, date: '2024-05-25T12:00:00Z' },{ id: 2, date: '2024-05-26T15:30:00Z' },
]);const formatDate = (row, column) => {const date = new Date(row[column.property]);return formatDateString(date);
};const formatDateString = (date) => {const year = date.getFullYear();const month = pad2(date.getMonth() + 1);const day = pad2(date.getDate());const hours = pad2(date.getHours());const minutes = pad2(date.getMinutes());const seconds = pad2(date.getSeconds());return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};const pad2 = (number) => {return (number < 10 ? '0' : '') + number;
};
</script>

4、結論

通過自定義 formatter 函數,你可以輕松地在 Element UI 表格中格式化時間數據,以滿足你的特定需求。這種靈活

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/15605.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/15605.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/15605.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【Python】 如何在Python中創建GUID UUID

基本原理 GUID&#xff08;全局唯一標識符&#xff09;和UUID&#xff08;通用唯一標識符&#xff09;都是用來在分布式系統中唯一標識信息的。在Python中&#xff0c;我們可以使用內置的uuid模塊來生成這些唯一標識符。 UUID有幾種不同的版本&#xff0c;每種版本都有其特定…

軟考-必須要背的內容

一、設計模式 1、創建型 抽象工廠&#xff1a;提供一個接口&#xff0c;創建一系列的相關相互依賴的對象&#xff0c;無需指定具體的類&#xff1b; eg&#xff1a;系統軟件&#xff0c;支持多種數據庫 生成器&#xff1a;將一個復雜類的表示與構造相分離&#xff0c;使得相…

Scrapy順序執行多個爬蟲

Scrapy順序執行多個爬蟲 有兩種方式&#xff1a; 第一種&#xff1a;bat方式運行 新建bat文件 cd C:\python_web\spiders\tiktokSelenium & C: & scrapy crawl spider1 & scrapy crawl spider2 & scrapy crawl spider3 & scrapy crawl spider4 第二種&a…

IOS開發者證書快捷申請

App Uploader 在進行iOS應用開發中,可以借助appuploader輔助工具進行證書制作、上傳和安裝測試等操作。首先,您需要訪問官方網站獲取最新版本的appuploader。最新版本已經優化了與Apple賬號的登錄流程,無需支付688元,并提供了Windows版和Mac版供用戶選擇。下載完成后,解壓…

USART串口通信(stm32)

一、串口通信 通信的目的&#xff1a;將一個設備的數據傳送到另一個設備&#xff0c;擴展硬件系統 通信協議&#xff1a;制定通信的規則&#xff0c;通信雙方按照協議規則進行數據收發 STM32F103C8T6 USART資源&#xff1a; USART1、 USART2、 USART3 自帶波特率發生器&…

方正暢享全媒體新聞采編系統 binary.do SQL注入漏洞復現

0x01 產品簡介 方正暢享全媒體新聞生產系統是以內容資產為核心的智能化融合媒體業務平臺,融合了報、網、端、微、自媒體分發平臺等全渠道內容。該平臺由協調指揮調度、數據資源聚合、融合生產、全渠道發布、智能傳播分析、融合考核等多個平臺組成,貫穿新聞生產策、采、編、發…

【華三包過】2024年/華三H3C/云計算GB0-713

H3CNE-cloud-云計算-713 想轉行 想繼續深入 題庫覆蓋百分百&#xff0c;題庫有新版106道新版113道舊版88道 H3C認證云計算工程師&#xff08;H3C Certified Network Engineer for Cloud&#xff0c;簡稱H3CNE-Cloud&#xff09; 認證定位于全面掌握虛擬化技術原理及相關產品/…

半導體行業AI機器視覺的應用探討(3)-效益如何評估

作為半導體廠的IT經理,評估AI機器視覺帶來的經濟收益和管理收益是一個多維度的過程,需要綜合考慮成本節約、效率提升、質量改進等多個方面。以下是一個具體的評估方案: 1. 成本效益分析(CBA) **步驟**: - **初始投資成本**:列出所有與AI機器視覺系統相關的初始投資,包…

c++二進制輸出

輸入一個數&#xff0c;輸出n個數&#xff0c;數可以是0或1&#xff1b;輸入&#xff1a;4輸出&#xff1a;0010&#xff1b;提示&#xff1a;本題要用到rand(),srand(time(0));代碼如下&#xff1a;#include<bits/stdc.h> #include<windows.h> using namespace s…

MySQL的數據庫和表

查看數據庫 命令行的方式&#xff1a; cd /mysql/bin mysql.exe -uroot -p IP&#xff08;不是連接自己&#xff09; 端口&#xff08;不是3306&#xff09; show databases; 直接使用圖形化界面點擊&#xff1a; 查看庫里的表 使用命令行查看&#xff1a; 進入mysql數據庫 u…

JavaFX學習教程二

一、JavaFX 體系結構 JavaFX 場景圖(Scene Graph)是構建 JavaFX 應用程序的起點&#xff0c;一種樹狀數據結構&#xff0c;用于排列&#xff08;和分組&#xff09;圖形對象&#xff0c;以便于邏輯表示。 stage:舞臺&#xff0c;操作系統窗口的 JavaFX 表示&#xff0c;是所有…

Nodejs+Socket.io+Web端完成聊天

前言 源碼獲取:nodeexpresssocket.ioweb: 聊天demo (gitee.com) 目錄結構 后端依賴 啟動方式 前端是html正常啟動 后端是node app.js 后端app.js核心代碼 const express require(express) const app express() var http require(http).Server(app) var io require(so…

掌握C++回調:按值捕獲、按引用捕獲與弱引用

文章目錄 一、按引用捕獲和按值捕獲1.1 原理1.2 案例 二、弱引用2.1 原理2.2 案例一2.3 案例二&#xff1a;使用base庫的弱引用 三、總結 在C回調中&#xff0c;當使用Lambda表達式捕獲外部變量時&#xff0c;有兩種捕獲方式&#xff1a;按值捕獲和按引用捕獲。 一、按引用捕獲…

Matlab自學筆記三十:元胞數組的修改、添加、刪除和連接

1.說明 元胞數組的子數組或元素也是元胞型的&#xff0c;其元素內容&#xff08;值&#xff09;是本身類型&#xff0c;因此&#xff0c;在添、刪、改和連接處理時&#xff0c;必須明確每個元素的值的類型和大小&#xff0c;否則&#xff0c;編程報錯是不可避免的了。看本文前…

Python 點云裁剪

點云裁剪 一、介紹1.1 概念1.2 函數講解二、代碼示例2.1 代碼實現2.2 代碼講解三、結果示例一、介紹 1.1 概念 點云裁剪 :根據待裁剪對象的多邊形體積(json文件)實現點云的裁剪。 1.2 函數講解 下面代碼示例中主要用到了兩個函數。 讀取待裁剪對象的多邊形體積信息(json文…

淺談C++函數

目錄 一、函數的概念二、調用函數的兩個前提三、函數傳參的三種形式四、函數返回類型 一、函數的概念 函數是C程序的基本模塊&#xff0c;通常一個C程序由一個或多個函數組成。函數可以完成用戶指定的任務&#xff0c;一般分為庫函數和用戶自定義的函數。函數由函數頭和函數體…

先進制造aps專題六 aps軟件開發最大的難點,設備甘特圖開發

aps軟件開發最大的難點&#xff0c;設備甘特圖開發 一般認為&#xff0c;aps軟開發中&#xff0c;算法是難的&#xff0c;排程算法難&#xff0c;優化算法更難&#xff0c;但其實最大的難點是設備甘特圖開發 aps軟件設備甘特圖開發的幾個難點如下 1 和項目甘特圖一行顯示一個…

02. Flink 快速上手

02. Flink 快速上手 1、創建項目導入依賴 pom文件&#xff1a; <properties><flink.version>1.17.0</flink.version> </properties><dependency><groupId>org.apache.flink</groupId><artifactId>flink-streaming-java<…

k8s配置pods滾動發布

背景 采用微服務架構部署的應用&#xff0c;部署方式都要用到容器化部署k8s容器編排&#xff0c;最近我在公司負載的系統也是用的上述架構部署&#xff0c;但是隨著系統的運行&#xff0c;用戶提的需求就會越多&#xff0c;每次更新的話都要停機發布&#xff0c;最用戶側來說就…

【C語言刷題系列】求一個數組中兩個元素a和b的和最接近整數m

&#x1f493; 博客主頁&#xff1a;倔強的石頭的CSDN主頁 &#x1f4dd;Gitee主頁&#xff1a;倔強的石頭的gitee主頁 ? 文章專欄&#xff1a;C語言刷題系列 目錄 一、問題描述 二、解題思路 解題思路&#xff1a; 解題步驟: 三、C語言代碼實現及測試 一、問題描述 給定一…