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>
相关推荐
Irene19911 天前
通用消息组件 bug 修复及更好的实现是使用函数调用组件
vue3·函数调用·通用消息组件
Irene19912 天前
Vuex4:专为 Vue 3 设计,提供完整 TypeScript 支持
vue3·vuex4
无法长大2 天前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css
cui_win4 天前
企业级中后台开源解决方案汇总
开源·vue3·ts
Sapphire~4 天前
Vue3-19 hooks 前端数据和方法的封装
前端·vue3
記億揺晃着的那天5 天前
Vue3 动态路由在生产环境才出现白屏的排查与解决(keep-alive 踩坑实录)
vue3·vue router·动态路由·生产环境报错
kong79069288 天前
Vue3快速入门
前端·vue3
无法长大10 天前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
淡笑沐白10 天前
Vue3使用ElementPlus实现菜单的无限递归
javascript·vue3·elementplus
Sapphire~10 天前
Vue3-18 生命周期(vue2+vue3)
vue3