vue-element-admin 登陆引言vue-element-admin是vue生态圈中,最火的一个后台管理框架。基于vue和element-ui实现。这篇文章主要会讲解登陆的流程以及我认为这个框架的厉害的东西:动态路由,之前看代码的时候,总想着一个登陆搞那么麻烦,后面仔细品味发现原来一个小小的登陆功能涉及到了这么多的东西。准备工作目录结构了解一个框架之前,先要从目录结构入手(这里直接引用花            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-08 15:56:38
                            
                                108阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            第一篇文章,51cto博客,将记录日常工作笔记,代码片段,bug,经验,今天整理个常用组件            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-06-29 14:37:25
                            
                                177阅读
                            
                                                        
                                点赞
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            城市选择页需求展示首先明确这是我们即将需要开发的城市选择页面:       城市选择页路由配置在gitee的分支栏点击新建分支city-router,然后记得将本地master分支切换到city-router分支。如何切换呢?步骤如下:第一步:使用git pull将创建的city-router分支拉到本地;第二步:执行git checkout city-router切换到city-router分支            
                
         
            
            
            
            目录前言 首先我们来看一下效果图: 一、layout布局1.创建头部(header.vue)2.创建侧边导航(sliber.vue)二、路由嵌套1.配置layout和路由总结前言在后台系统设计中,经常会使用layout布局以及路由,想知道具体怎么使用,继续往下看看吧~ 首先我们来看一下效果图:layout布局。侧边导航又有子菜单,所以我们需要路由嵌套。分析完了,那我们            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-21 10:04:15
                            
                                301阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.场景描述我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数。刚接到这个需求时,心中很不乐意,因为Element-ui的日期选择器根本不支持显示周数。我只能看看源码来看看能否有解决的办法具体代码大家可以在github中看到 https://github.com/ElemeFE/element/pull/16415/commits/2            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-19 07:22:15
                            
                                858阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            el-select的选择以后返回对象实现方法背景需求 背景需求下面先看一下需求: 说是有个值班表单,里面要进行值班人员下拉,下拉就下拉吧,他还得再下拉选择以后要把这个人的电话号码也查出来 说实话真不难,不就是将电话号码加到select的下拉对象里fetchUser() {
      this.listLoading = true
      getSelectList().then(respo            
                
         
            
            
            
            1、级联选择器(el-cascader)先看一下效果吧,这个是选择的效果,支持多选,根节点禁选这个是回显的效果接下来说一下怎么实现吧~//其中platList为数据源,codeList是绑定选中的值,props为配置选项,clearable可清空(选完之后后面带一个删除的按钮),handleToChange是选中值后触发的,可以在这个方法中绑定值
<el-cascader :options=            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-26 16:18:43
                            
                                2555阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            目录一、Mock1.1 什么是Mock.js1.2 安装与配置1.2.1 安装mock.js1.2.2 引入mock.js1.3 mock.js使用1.3.1 定义测试数据文件1.3.2 mock拦截Ajax请求1.3.3 界面代码优化二、总线2.1 定义2.2 类型分类2.3 前期准备2.4 配置组件与路由关系2.4.1 配置组件2.4.2 配置路由关系2.5 展示            
                
         
            
            
            
            ElementUI安装与使用指南
Cascader 级联选择器
点击下载learnelementuispringboot项目源码
效果图el-cascader.vue(Cascader 级联选择器)页面效果图项目里el-cascader.vue代码<script>
let id = 0;
export default {
  name: 'el_cascader',
  data()            
                
         
            
            
            
            目录1、element-ui组件用法2、表单验证(复制的默认样式)3、图标引入4、webpack目录配置指向5、export暴露方法 1、element-ui组件用法这里先补充一下安装依赖 npm i element-ui -S main.jsimport Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/            
                
         
            
            
            
            element-ui的简单笔记element-ui简单笔记(上)element-ui简单笔记(下) 八、Form相关组件8.1 Radio单选按钮1.创建Radio按钮<!--组件创建-->
<el-radio v-model="label" label="男">男</el-radio>
<el-radio v-model="label" lab            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-09 15:57:42
                            
                                115阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            先上效果图   需求粒度—时间选择器联动时间周期不能大于今天。(所以今天以后的时间都不能选)
周粒度——因为一周没过完,所以不能选当前周月粒度——因为本月没结束,不能选当前月切换粒度的时候自动选择最近符合的时间。侧边有快捷选择。根据需求还有个隐藏bug 周需要特殊处理选择的日期还有样式周粒度是一周一周选择,所以需要特殊处理 上代码父组件使用<lidu-            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-18 13:46:26
                            
                                213阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            近期在做智慧校园APP的后台管理系统,用的是ElementUI的组件,这是背景。在学生信息模块有个新增表单添加学生信息,里面有个字段叫做“所属院系专业”,因为是个关联下拉框,因此就用到了ElementUI的级联选择器组件,之前是这种写法:  <el-form-item label="所属院系专业" prop="deptId" >
  <el-cascader v-model="d            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-10-14 14:37:44
                            
                                42阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            address.json 文件下载。            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-09-24 01:43:03
                            
                                2396阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            data-picker 日期选择控件需求:需要实现一个日期选择功能,能够输入开始日期 结束日期,展示格式为yyyy-MM-dd,整个数值返回为一个数值(例如:[2020-01-02,2020-01-03]) 细节要求:当前时间之前日期不可选择如果选择了当前时间,则另一个时间,只能是在选择日期的前后一天内选择清除日期后,仍可以进行选择具体实现效果展示如下: i. 选择之前:当前日期为18号,则18号            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-24 12:19:33
                            
                                1361阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            关于ElementUI中级联选择器选择内容时出现空白的情况使用ElementUI中级联选择器进行某些数据的选择时,发现最后一级是空白的页的情况,如下图所示:原因分析 通过查看请求中的响应我们发现,响应数据中存在children为[]空数组的情况,而在ElementUI中的级联选择器里,[]会被解析为空白数据进行展示,因此,前端人员在接受到后端开发人员返回的数据时,需要将children为[]的数据            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-08-23 10:36:53
                            
                                130阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            目录问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!复选框框架:通过调用selectable方法,进行禁用复选框。1.指定行禁用:2.条件禁用:问题点:当条件数据全被禁用时,全选按钮不是禁用的状态。复选框全被禁用时,全选按钮将被隐藏 问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-19 09:36:59
                            
                                137阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1、效果图2、一些思路+碰到的报错(1)row:表格的行数据,选中/取消选中哪行,就是哪行的数据注意:row只能是表格的data属性指定的数组中的数据,放其它数组中数据是无效的(2)selected:true-选中;false-取消选中this.$refs.table.toggleRowSelection(row, selected)(3)在打开弹窗时,需要先让弹窗的visible变为true,再            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-25 08:06:56
                            
                                2480阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            先看图,你是否也遇到这个需求?如果你正在焦头烂额,无脑抓瞎,那么你来对地方了,因为我将给你一个简单易懂的实现方案。我也在网上翻了无数页答案,也照着别人的代码和思路尝试了,事实上并不能解决我这个棘手的问题。级联下拉选多选、懒加载、数据回显,尽管 ElementUI 已经很贴心,文档写的也很好。前两个很容易就可以实现,可是唯独数据回显被遗忘了,似乎忘记了数据回显应该是级联选择器必备的功能,很遗憾,需要            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-05 17:13:34
                            
                                437阅读
                            
                                                                             
                 
                
                             
         
            
            
            
             思路:         留言功能:点击留言 -> 获取昵称和留言内容 ->判断输入是否为空->有输入就留言成功->10s后再次留言        1. 获取元素   function $(selector) {  return doc            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-09-29 00:26:10
                            
                                96阅读