代码编织梦想

需求:需要进行一个时间区间的选择

遇到的问题:需要设置默认值,只需要拿到小时和分的时间格式。

<el-time-picker
                is-range
                style="width:500px"  //必须设置宽度,不然会导致刷新或初始化的时候撑不开这个组件
                :disabled="isDisabled"
                v-model="form.time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm"
                format="HH:mm"
              ></el-time-picker>

必须设置默认的时间,不然无法进行时间的选择,组件里显示的为空数据

data(){
    return {
        form:{
            time: [new Date(2020, 1, 1, 9, 0), new Date(2020, 12, 31, 18, 0)],
        }
    }
}

如果设置有默认事件,直接用后台的返回事件,会导致传给后台的格式不正确,所以要对这种情况进行单独的时间格式化

if (typeof this.form.time[0] == "object") {
            startTime = moment(this.form.time[0]).format("HH:mm");
            endTime = moment(this.form.time[1]).format("HH:mm");
          } else {
            startTime = this.form.time[0];
            endTime = this.form.time[1];
    }
}

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_27702739/article/details/107757827

element ui el-upload 图片上传组件间的坑点记录-爱代码爱编程

 需求:使用的el-upload组件实现图片上传和图片的反显 <el-form-item label="场地图片:" class="site-icon"> <el-upload :action="''" list-type="picture

Element UI 中路由和权限校验的分析及实现-爱代码爱编程

一、路由和权限校验 路由和权限校验,在参与的项目中是如何处理路由和权限映射的?路由处理逻辑分析,如下所示:访问 /xxx,router.beforeEach 会做全局的导航守卫,从 cookie 中获取 token,判断 token 是否存在。如果 token 不存在,判断路由是否在白名单中。如果在白名单中,则访问路由 /xxx。如果不在白名单中,访问路

Element UI 中登录流程的前后端分析-爱代码爱编程

一、登录流程分析 前端,用户输入用户名和密码,结合路由和权限校验,然后进行登录。这样,前端附带用户名和密码发送给后端。后端接收到后,结合 mysql 应用进行用户鉴权。后端结合 jwt 应用,通过 jwt 生成 token,将 token 发送给前端。前端保存 token,然后请求用户信息。在保存 token 和请求用户信息中使用了 axios 拦截器。

elementui中gutter和offset的区别-爱代码爱编程

gutter是指栅格间间隔,offset是指栅格左侧的间隔格数 分栏间隔 el-row配置行,el-col配置列,像是一个个单行的表格 el-row上的属性gutter,默认值为0,可以设置大于0的任意数字 在PC端,设置的这个gutter值为该单元格左右的padding之和 <el-row :gutter="20"> <e

Element UI 中侧边栏的分析及实现-爱代码爱编程

一、el-menu 和 el-submenu 如果需要实现一个侧边栏,会如何设计?侧边栏的核心是将根据权限过滤后的 router 和 el-menu 组件进行映射,所以 el-menu 和 el-submenu 是理解 sidebar 的基础。el-menu 表示菜单容器组件,如下所示:default-active:当前激活菜单的 index,注意如果存

Element ui 表格(Table)组件中前端实现数据分页和模糊查询-爱代码爱编程

前端后台管理会存在很多表格,表格数据过多就需要分页,前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索。 1. 效果展示 2. 完整代码 <template> <div > <el-input v-model="searchVal