26-格式化时间

html 复制代码
<template>
    <div class=''>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号"/>
            <el-table-column prop="username" label="账号"/>
            <el-table-column prop="nickName" label="姓名"/>
            <el-table-column prop="email" label="邮箱"/>
            <el-table-column label="添加时间">
                <template v-slot:default="scope">
                    {{ formateDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="最后登录">
                <template v-slot:default="scope">
                    {{ formateDate(scope.row.loginTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="是否启用"/>
            <el-table-column label="操作"></el-table-column>
        </el-table>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs } from 'vue'
import { getAdminListApi } from '@/api/ums'
import { ElMessage } from 'element-plus'

const state = reactive<{
    tableData: {}[]
}>({
    tableData: []
})

let { tableData } = toRefs(state)

getAdminListApi({
    keyword: '',
    pageNum: 1,
    pageSize: 10
}).then((res) => {
    if(res.code === 200) {
        tableData.value = res.data.list
    } else {
        ElMessage.error('获取用户数据列表失败')
    }
})

const addZero = (num: number) => {
    return num > 9 ? num : '0' + num
}

// 格式化时间
const formateDate = (time: string | undefined) => {
    if (!time) return '';
    const date = new Date(time);
    const year = date.getFullYear();
    let month = addZero(date.getMonth() + 1);
    let day = addZero(date.getDate());
    let hour = addZero(date.getHours());
    let min = addZero(date.getMinutes());
    let sec = addZero(date.getSeconds());
    return  `${year}-${month}-${day} ${hour}:${min}:${sec}`
}

</script>

<style lang='less' scoped>

</style>
相关推荐
布兰妮甜2 小时前
从 0 搭建企业级 Vue3/Vite 脚手架(规范、eslint、husky、打包、环境变量全流程)
typescript·vue3·vite·脚手架·前端工程化
gis开发之家21 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
华玥作者2 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
sugar__salt3 天前
Vue3 基础知识点整理 —— 从入门到响应式核心完全指南
vue.js·笔记·vue·vue3
万亿少女的梦1684 天前
基于微信小程序、Spring Boot与Vue3的智慧养老管理系统设计与实现
spring boot·redis·微信小程序·mybatis·vue3
gis开发之家5 天前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
gis开发之家6 天前
《Vue3 从入门到大神32篇》Vue3 源码详解(二):从 GitHub Clone 到断点调试,手把手搭建源码阅读环境
vue.js·前端框架·github·vue3·vue3源码
gis开发之家7 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
gis开发之家9 天前
《Vue3 从入门到大神29篇》单元测试与 E2E 测试 —— 保障 Vue3 项目的质量
前端·javascript·vue.js·单元测试·前端框架·vue3
雨季mo浅忆9 天前
上传文件夹
前端·vue3