Element
文章平均质量分 77
不就是个div嘛
你代码写完了吗?写完借我抄一下呗
展开
-
vue + elementUI 实现 自定义正则规则验证
项目场景:常见的表单填写中都会遇到,比如新增信息,修改信息等,如下图相信大家对上面的验证都非常熟悉了,不多哔哔本篇文章主要 想写 验证规则自定义 相关的内容验证是否是合法手机号(举例)实现下图所示:实现步骤:step 1准备好 reg表达式 , 百度即可 电话号码—— /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/step 2model 和 ref 最好一致 prop验证的phone_number原创 2022-03-10 14:06:01 · 1409 阅读 · 0 评论 -
关于 element-ui 的 datetimepicker无法满足操作需求的一次记录
项目需求:如图所示:【核心的需求即为 通过下拉选择时间粒度,从而来控制 分钟数的展示】上图是最近优化的样式,当初急于实现功能,采用的是下图所示的方案:【通过图上的注释我们可以得知,是通过 勾选时间粒度 来控制 timepicker的 分钟间隔,但是这样会有一个非常不爽的操作体验】比如,勾选一个15分钟粒度,那么 timepicker的样式将会是这样:(下拉的时候太多太长)于是乎:需求集中于——如何处理这一问题当初考虑的是用bootstrap风格 时间日期选择器【类似于 这样 :让原创 2021-08-02 15:35:28 · 922 阅读 · 0 评论 -
vue脚手架开发 + 关于steps步骤条功能的实现
项目背景:【由于业务需要,要做一个简单的动态steps组件来展示当前业务的状态,需要达到的效果如下图所示】图一:图二:【OK,图片放出来了,下面就来说说完成这个功能踩了的坑和学到的知识,希望下一次自己遇到能不犯同样的错误】本功能需要注意的几点:关于数据的问题,详情页与上一级列表页面 之间 数据如何传递?为什么最好不要用params来传递较多的数据?饿了么的steps组件与本功能之间的冲突有哪些?【1】很明显,数据肯定是由列表页的点击详情——详情页,在这里我犯了一个错误,我想通过这原创 2021-01-05 16:54:10 · 3321 阅读 · 3 评论 -
vue脚手架开发 + loading组件 + axios拦截器 实现 loading 效果
学习目标:原创 2020-12-31 14:38:23 · 506 阅读 · 0 评论 -
vue脚手架开发 + element-UI组件 实现 增删改查
学习目标:【虽然已经有很多轮子把增删改查封装好了直接用就行了,在github上面一大堆,但身为前端人,这种基本功当然是必须具备的】原型图解释:原创 2020-12-31 11:30:16 · 1454 阅读 · 4 评论 -
纯前端实现各类表单组件单条件查询功能(看完必会)
学习目标:如题目所示,再也不用苦苦等待后端的数据配合,前端独立实现。【当然,真正前后端分离项目,还是后端大佬说了算】样式图展示:核心问题:数据查询成功后,如何还原?查询功能的核心算法是什么?本功能最应该注意什么问题?【1】由于查询功能是用的数组的filter方法来实现过滤的,所以它返回的是一个新数组,言下之意:它会改变原来的tableData数据,这样来处理还原的问题不好控制。所以,最开始的就要准备好一份原始数据,然后接下来的任何操作需要用到的—都用原始数据深拷贝出来的数据,这样有原创 2020-12-28 17:45:36 · 8606 阅读 · 5 评论 -
Vue脚手架+Element UI开发——快速实现表格数据分页(带实例和细节分析)
项目背景:最近在写一个后台管理系统项目的demo,需要用到element 组件的表格和分页,所以干脆写篇文章,彻底把分页这个功能搞熟,搞透,以后需要用到表格数据分页的效果,直接在这里Ctrl +C/V就行了,OK,直接来吧。学习目标:熟练饿了么的el-table和el-pagination组件,并配合使用实现分页。熟练调整饿了么组件的样式,和尽量避免一些常见的坑。学习内容——表格分页:【步骤】.首先必须满足前置步骤:npm i element-ui –S【这是全局的引入】在 main.j原创 2020-11-29 17:43:08 · 787 阅读 · 2 评论