最近工作中经常用到日历这个组件, 以前大多是用moment.js或者dayjs去做的, 其实使用原生js也并不复杂.1.首先我们来认识几个这个组件中使用的new Date常用的方法this.lastDay = new Date(y, m + 1, 0).getDate() // 获取指定月的最后一天也即每月多少天 this.lastMonthDay = new Date(
效果图如下 使用elementUI的Calendar日历组件组件本身是这个样子要在每个日期格子里加上 班/休 去掉点击事件和 上个月|今天|下个月 的切换数据格式是这样的 分上段和下段let scheduling = [{ staffname: "张三", arrangeHalf: "上午", arrangeStatus: ["班","班","班","班","班","班","班","班","
一:这里设置的是控制日期选择范围最大不超过一周1:如果想要控制时间的单位精确到分的话可以加上 format="yyyy-MM-dd HH:mm value-format="yyyy-MM-dd HH:mm" 这两个属性。2.html部分 设置:picker-options="pickerOptions" 这个属性开启格式化日期<el-date-picker v
elemen-ui 中日期disabledDate ,禁止选择当前之前的日期 <el-date-pickerv-model=“value1”type=“date”:picker-options=“pickerOptions”placeholder=“选择日期”> // 属性picker-option ...
转载 2021-09-28 16:19:00
445阅读
项目场景:提示:由于项目涉及数据过多,可能造成查询、删除、更新等功能降低效率,为避免这种现象的出现,提前建了两个相同的数据库表,分别是 近6个月 和 6个月前 的数据。 界面默认为“近6个月”的数据,前端需将“近6个月”对应的识别符,从一开始传递给后端。情况一:在默认状态下,即扫描时间为“近6个月”时:假定当前日期是2020-12-23,用户可以选择的日期范围是2020-06-24到2020-12
需求:使用el-date-picker组件时显示农历数据。 修改思路:提取element-ui源码,添加相应样式,农历转化数据写在公共文件中引用。一、提取组件将在node_modules > element-ui > packages 下的 date-picker组件文件夹的内容复制一份到自己项目的components目录下 ;在main.js文件夹中导入放到componen
转载 3月前
2295阅读
限制区间30天: pickerMinDate: '', pickerOptions: { onPick: ({ maxDate, minDate }) => { this.pickerMinDate = minDate.getTime() if (maxDate) this.pickerMinDat
.
原创 2021-12-10 16:03:04
1290阅读
本文档从零开始搭建一个通用的管理后台,技术栈为vue2.0 + vue-router + vuex + element-ui + axios 。最终效果如下: 左侧为菜单栏,右侧包含头部,面包屑,主内容区。左侧菜单栏可折叠,可全屏,刷新页面后还是之前页面状态。gitee地址:https://gitee.com/liubangbo/yilin-admain/tree/master如对您有帮
1.场景描述我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数。刚接到这个需求时,心中很不乐意,因为Element-ui的日期选择器根本不支持显示周数。我只能看看源码来看看能否有解决的办法具体代码大家可以在github中看到 https://github.com/ElemeFE/element/pull/16415/commits/2
实战说明:本文主要讲解前后端分离框架实现动态增加、删除文本框组,前端VUE+ElementUI,介绍如何通过JS动态增;后端:springboot+mybatis,介绍如何设计主子表对表单提交的数据进行存储,实现如下界面效果:前端vue界面设计:   以打开一个对话框为例,在对话框中可以点击加号,增加多个文本组;点击减号,减少文本组。核心代码从 <span cl
一、Element UI中表格的渲染对于页面表格中的数据,在页面一开始加载的时候就可以获取的到,可以使用created()的生命周期钩子函数,在里面去调用获取数据的方法,代码如下:created () { this.getUserList() }在data中定义需要使用到的数据,根据api接口返回的数据,queryInfo是获取用户列表的参数对象,userList是获取的用户列表,tot
前言最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来而且也用于了这么多频道的东西,如果没有总结,没有整理,没有开源就太可惜了......所以最近开始整理框架相关的东西,争取抽象一点东西出来框架出来还需要一点时间,但是框架会需要相关的UI库,这个东西可以先有思路,最后再根据框架做一点调整吧日历对于UI插件而言还是
转载 2月前
72阅读
element-ui与Vue的使用:创建一个table表格的增删改。这几天都在学习element,现在把我学习到的东西分享给大家:首先介绍一下element,这是一款专门给前端程序员设计的,而layui可以说是专门给后端程序员设计的。 其次就是关于element的使用,这其实很简单,只要把自己想要的东西拷贝进来就可以了,直接用上。一、我刚刚开始学习的时候,就被弹框困扰了,我一直以为在js里面写弹框
先上效果图   需求粒度—时间选择器联动时间周期不能大于今天。(所以今天以后的时间都不能选) 周粒度——因为一周没过完,所以不能选当前周月粒度——因为本月没结束,不能选当前月切换粒度的时候自动选择最近符合的时间。侧边有快捷选择。根据需求还有个隐藏bug 周需要特殊处理选择的日期还有样式周粒度是一周一周选择,所以需要特殊处理 上代码父组件使用<lidu-
最近公司有一个新需求要求在日期控件(DatePicker)加一些信息上去,首先申明UI库antdesign的日期控件是完全支持的,如果公司采用的是antdesign那就没必要折腾了。我们公司项目主要是用的elementUI出于不想再引入另一个UI库的前提下还是选择了自己简单折腾了一下。(懒得码字了????)废话不多说直接上效果图和github链接【https://github.com/powerM
转载 2021-03-09 17:48:51
404阅读
2评论
这里我使用的是以服务方式引入的Loading,参考网上给的全局配置文件,整理了一下。在使用过程中发现了一些问题。在vue项目文件夹中,这里我就在utils中创建了一个loading.js文件,用来写全局配置:以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的Loading 实例,而是返回现有全屏 Loading
文章目录前言项目地址以及怎么阅读别人的代码整体代码分页数据作者是怎么处理的 usePagination顺藤摸瓜找到 api 接口的封装api 接口再往底层找全局请求封装与请求拦截器 service.ts 前言今天看一个 ts 项目的 table 模块,亲身体验这是公司后台管理系统一定会使用到的,也是最常使用到的,这个项目对新手很友好,毕竟是一个相对来说比较空的项目模板,对于我来说就是一个学习的记
项目需求,需要快速选择日期,今日,昨日,本周,上一周,本月,上一月,本季度,上季度,一季度 二季度 三季度 四季度 本年,上一年代码:<!-- 注意: 季度和本年都需要判断是否过完当前季度和当前年度--> <!-- vue+element 时间插件 --> <template> <div class="block"> <el-d
最终效果如下 实现要求:如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容;如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表;实现思路使用原生的input框,更容易控制;当输入框获取焦点以后,保存原始值;监听回车点击事件与change事件,判断输入的值是否满足条件: 如果满足条件,那么就根据输入的内容更新内容,并且重新获取列表内容;如果不满足条件,
项目结束,想着总结点东西,就又找了这个来总结一下,下次碰到,方便自己查找。先说,后端分页吧: 后端分页,顾名思义,后端做好分页,你把要请求的页数和条数发送给他,他返回给前端,再渲染到页面上~结合elementUI的话,后端还需要把数据的总条数,即total作为一个字段返回,前端才能做分页嗷! 下面上大概的代码,方便自己和大家参考一下。 html:<div class="trend-Area"
  • 1
  • 2
  • 3
  • 4
  • 5