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>
相关推荐
theMuseCatcher5 天前
Vue3导航菜单(Menu)
typescript·vue3·less
theMuseCatcher6 天前
Vue3评论(Comment)
typescript·vue3
RuoyiOffice7 天前
Vue3+Gantt:把任务排期、依赖关系和里程碑放进项目管理
项目管理·vue3·springboot·dhtmlx-gantt·wbs·gantt·ruoyi office
AI开源软件9 天前
SpringBoot3+Vue3 财务管理系统如何设计:从业务单据到总账的模块划分
spring boot·vue3·领域建模·会计凭证·ruoyi office·业财协同·财务系统设计
Nymph_Zhu13 天前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
Nymph_Zhu13 天前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
AI源码16 天前
巨峰影视影院
vue3
RuoyiOffice16 天前
UniApp企业办公:把审批、客户和项目装进手机,能做些什么?
spring boot·vue3·uniapp·crm·flowable·移动办公·企业应用
RuoyiOffice17 天前
SpringBoot OA推荐:面向信创选型,看看这套企业协同平台
spring boot·vue3·信创·flowable·企业协同·ruoyi office·oa选型
周厉17 天前
WebSocket 使用场景与实现方法:Java + Vue3 全栈实战
java·websocket·vue3·websocket双向通讯