vue3+layout 时间格式化

1.npm安装插件Day.js

npm install dayjs --save

2.页面引入

import dayjs from "dayjs";

3.创建方法

 const dateFliter = (val, format = "YYYY-MM-DD hh:mm:ss") => {
      if (!isNaN(val)) {
        val = parseInt(val);
      }
      return dayjs(val).format(format);
    };

24小时制和12小时制的写法如下:

yyyy-MM-dd HH:mm:ss   后面的时分秒是24小时制

yyyy-MM-dd hh:mm:ss   后面的时分秒是12小时制

4.html部分用插值表达式:

获取数据后layout表格中时间栏的渲染

<template v-if="column.key === 'sys_inserttime'">
    <a>
        {{ dateFliter(record.sys_inserttime) }}
    </a>
</template>

当前时间:

{{ dateFliter(time) }}

5.vue3中记得将方法dateFliter 最后return出去。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3中,可以通过使用`createRouter`函数来创建路由实例,同时使用`createWebHashHistory`或`createWebHistory`函数来创建不同类型的路由模式。在动态添加路由的过程中,需要使用`router.addRoute`方法向路由器中添加新的路由配置项。 下面是一个示例代码,展示如何使用Vue3、Vite和Layout布局动态添加路由: ```javascript // 引入相关模块 import { createRouter, createWebHashHistory } from 'vue-router'; import Layout from '@/layout/index.vue'; // 创建路由实例 const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Layout, children: [] } ] }); // 添加动态路由 const newRoutes = [ { path: '/dashboard', component: () => import('@/views/dashboard/index.vue'), name: 'Dashboard', meta: { title: 'Dashboard', icon: 'dashboard' } }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index.vue'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index.vue'), meta: { title: 'Tree', icon: 'tree' } } ] } ]; newRoutes.forEach(route => { router.addRoute(route); }); export default router; ``` 在上面的示例代码中,我们首先创建了一个包含一个空子路由的路由配置项。然后,我们定义了一个数组变量`newRoutes`,用于存放需要动态添加的路由配置项。最后,我们通过`forEach`循环遍历`newRoutes`数组,并通过`router.addRoute`方法将每个路由配置项添加到路由器中。 需要注意的是,`router.addRoute`方法只能在初始路由时使用,无法在路由已经初始之后使用。因此,我们需要在`createRouter`函数中初始路由,并在路由创建完成之后再添加动态路由。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值