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.mzph.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语言代码实现及测试 一、问题描述 给定一…