Vue3:el-table实现日期的格式化

后端如果返回的是时间戳,需要我们进行日期格式化

例如:2024-09-11T14:19:14

定义一个日期解析的工具组件

javascript 复制代码
export function formatDateAsYYYYMMDDHHMMSS(dateStr: any) {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

在表格中进行使用该工具完成日期解析

javascript 复制代码
   <el-table-column fixed label="发布时间" width="150">
            <template #default="scope">{{ formatDateAsYYYYMMDDHHMMSS(scope.row.createTime) }}</template>
   </el-table-column>
相关推荐
Elcker1 小时前
JAVA-Web 项目研发中如何保持团队研发风格的统一
java·前端·javascript
selectDele1 小时前
Solid.js和React的比较
前端·javascript·react.js·solid.js
摘星编程2 小时前
React Native for OpenHarmony 实战:I18n 国际化详解
javascript·react native·react.js
—Qeyser2 小时前
Flutter AppBar 导航栏组件完全指南
前端·javascript·flutter
摘星编程2 小时前
React Native for OpenHarmony 实战:Localization 本地化详解
javascript·react native·react.js
Amumu121382 小时前
React扩展(一)
前端·javascript·react.js
xkxnq3 小时前
第二阶段:Vue 组件化开发(第 28天)
前端·javascript·vue.js
摘星编程3 小时前
React Native for OpenHarmony 实战:RTL 从右到左布局详解
javascript·react native·react.js
小范馆3 小时前
STM32F03C8T6通过AT指令获取天气API
前端·javascript·stm32
zhengxianyi5153 小时前
vue-cli build, vite build 生产部署刷新或弹窗404,页面空白修复方法
前端·javascript·vue.js·nginx·生产部署