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>
相关推荐
梵得儿SHI12 小时前
Vue 3 生态工具实战:UI 组件库与表单验证完全指南
前端·ui·vue3·elementplus·表单验证·antdesignvue·veevalidate
A_nanda20 小时前
Vue项目升级
前端·vue3·vue2
创梦流浪人2 天前
soli-admin一款开箱即用的RBAC后台项目
java·spring boot·vue3·springsecurity
floret. 小花5 天前
Vue3 + Electron 知识点总结 · 2026-03-21
前端·面试·electron·学习笔记·vue3
木斯佳6 天前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
沙振宇6 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(六)模拟自驾场景SR+3D可视化
前端·游戏·3d·vue3·playcanvas
小鲤鱼ya6 天前
vue3 + ts + uni-app 移动端封装图片上传添加水印
前端·typescript·uni-app·vue3
floret. 小花6 天前
Vue3 知识点总结 · 2026-03-20
前端·面试·electron·学习笔记·vue3
January12076 天前
VBen Admin 实战:身份证号自动填充出生年月
vue3·vben
哆啦A梦15887 天前
java项目在后端做跨域配置
java·vue3