jjzjj

elementui

全部标签

nodejs+vue+ElementUi家政服务系统c90g5

项目中登录模块用到token家政服务平台有管理员,雇主,雇员三个角色。管理员功能有个人中心,雇主管理,雇员管理,资料认证管理,项目类型管理,服务项目管理,需求信息管理,服务预约管理,申请预约管理,签订合同管理,雇主评价管理,留言板管理,系统管理。雇主可以发布需求,雇员可以申请预约,雇主支付报酬,雇主和雇员可以签订合同,雇主可以对雇员进行评价。家政服务平台的开发根据操作人员需要设计的界面简洁美观,在功能模块布局上跟同类型网站保持一致,程序在实现基本要求功能时,也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时,也实现了数据信息的整体化,规范化与

【关于Element UI中el-table组件】summary-method属性表格底部固定两行并动态赋值

小编在开发账单表时候遇到一个需求,需要在el-table表格添加两行固定行,来统计总值。我们可以看到在各个资源社区里都有关于底部固定一行总计。但是那些都是直接将上面的总值相加起来获得上面所有行的总计值。然而小编这里的需求是将后端返回的数据填充到我们固定的那两行中去。因此社区里的资源就不符合小编的开发需求了。我们先来看看将所有行相加得出总计行的值的代码是如何的。一、底部固定一行总计行并得出总计值1.首先就是在el-table中使用summary-method属性,设置:summary-method=“getSummaries”,这一步是必要的。2.编写getSummaries()方法函数getS

Vue面试题总结

1、有没有单独封装过组件?(common,view)答:有封装过,在项目的common文件夹中会存放项目的公用组件即可重用的部分放在common中,如项目的头组件,底部组件,侧边栏组件、导航栏组件等,项目里的view文件夹下存放与路由器绑定的组件。component一般存放重用的小组件,view里存放页面级组件。2、首屏加载白屏怎么进行优化?(答:①采用路由懒加载的方式,当用户访问的时候,再加载相应的模块。    ②webpack开启gzip压缩。    ③使用CDN减小代码体积加快请求速度。    ④项目打包禁止生成map文件。    ⑤使用外链css和js文件。    ⑥使用骨架屏,在首页

基于Oauth2授权码模式的SSO单点登录+基于RBAC权限模型的动态路由的前后端分离的权限认证系统

前言本文侧重实战,是统一认证系统的一个demo,适合对oauth2协议、SpringSecurity、Vue等技术有一定理解后阅读。这个demo以房屋出租系统为背景,主要实现了oauth2的授权码模式,client信息入库,增强token,前后端分离架构,用户RBAC权限模型,前端动态路由等。demo的gitlab地址会在文末贴出。先看一下登录及动态路由的效果。gif展示:超级管理员登录展示gif展示普通用户登录展示1.名词解释1.1.前后端分离前后端分离的部署架构大家都不陌生,这里就列举一下前后端分离的优缺点。优点:提高开发效率前后端各负其责,前端和后端都做自己擅长的事情,不互相依赖,开发效

ElementUI笔记 -- 1

目录一.认识ElementUI1.认识ElementUI2.ElementUI与Vue3.使用npm来创建Vue项目4.添加ElementUI配置4.1使用npm安装5.使用CDN的方式创建页面二.Layout布局和Container布局容器1.Container布局容器2.常见的布局方式2.1上下布局2.2上中下布局2.3左右布局2.4上-下(左右)布局2.5上-下(左右(上下))布局2.6左右(上下)布局2.7左-右(上中下)布局3.Layout布局3.1基础布局3.2分栏间隔3.3分栏偏移3.4对齐方式3.5响应式布局三.基础组件1.Icon图标2.Button按钮3.Link文字链接一

elementUI实现上传视频时获取视频时长设置大小限制

vue项目用elementUI写一个上传视频做时长上传限制的功能,扒了一圈下来,没几个可以直接使用的,基本是错漏百出,剩下的不多说,上代码。上传文件之前都有一个方法before-upload,上传前的操作,都熟悉asyncbeforeAvatarUpload(file){let_this=this;//判断视频格式,根据需求随便加if(['video/mp4','video/ogg','video/wmv'].indexOf(file.type)==-1){this.$message.error('请上传正确的视频格式');returnPromise.reject(false);//之前我直接

element-ui Form表单校验小结及踩坑

element-uiForm表单校验小结及踩坑**1、要验证输入只能为数字时**方法一如果使用type=“number”样式这边去掉type=number时自带的属性/*去除webkit中input的type="number"时出现的上下图标*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;}input[type="number"]{-moz-appearance:textfield;}也可以用自带的rules校验,这边就统一提交的时候,校验其中我们也可以用自带

element UI NavMenu 导航菜单样式修改

.el-menu{ background-color:rgba(165,42,42,0);}.el-menu.el-menu--horizontal{ border:none;}/*hover颜色改变*/>>>.el-menu--horizontal>.el-submenu.el-submenu__title:hover{ background:transparent; color:#d75b5f;}.el-menu--horizontal>.el-menu-item.is-active{ border-bottom:none;}.el-menu--horizontal>.el-menu-it

配置本地 GIT 同时使用多个账号

一、首先配置你自己的git信息cdgitconfiguser.namegitconfiguser.email二、生成SSH密钥#-C后接邮箱地址,例:-C"aaa@qq.com"#-f后接生成密钥的路径(同时包含了密钥的文件名),这样就不用在生成时单独输入密钥文件名#不同的密钥文件名要区分不同文件名,以下是GitHub的ssh密钥示例ssh-keygen-trsa-C""-f~/.ssh/id_rsa_github#这之后直接回车就行了三、找到自己的ssh文件夹,通常都是在C:\Users\Administrator.ssh下,一个是默认名称id_rsa,一个是 id_rsa_github,分

实现elementui-tree组件鼠标滑过显示标签信息

项目中产品提了一个这样的需求(鼠标悬浮标签之上展示标签信息),老大一直问能不能实现?其实很简单!他不确定的点是在他写的位置不对,还有取的定位值不对,因为如果是说单纯从树节点自定义滑入滑出显示定位标签的话当列表内容过多出现滚动条的时候会导致标签内容被遮住!那这个时候我们就可以考虑除了子元素相对定位之外还有什么方法可以获取到当前位置进行内容跟随显示,那就是我们的鼠标位置信息。可以通过获取鼠标位置信息,设置标签信息模块在外层,通过获取鼠标距离X轴Y轴的位置进行固定定位!一下代码实现mousenter(event,data)"@mouseleave="event=>mouseleave(event,d