![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element
菜鸟茜
资浅程序媛^-^个人公众号/头条/百家:郑州小闲人
展开
-
el-calendar日历自定义显示内容
有码友在评论区里分享了更简介的方式,看到后一直想尝试一下,所以本篇就是来填坑的。原创 2022-08-16 15:40:31 · 3218 阅读 · 6 评论 -
VUE+Element-ui实战之el-calendar日历自定义显示内容
需求说明 添加el-calendar组件 遍历日期,确定显示内容 上月本月点击事件 最终实现效果原创 2021-06-22 17:40:40 · 13927 阅读 · 10 评论 -
VUE+Element-ui实战之el-table行内编辑
对于一些字段比较多的数据来说,通常需要弹窗来添加或编辑;VUE+Element-ui实战之新增弹出框和编辑弹出框共用一个组件对于简单字段的采用行内编辑显然开发量会更少一些!主要参考示例:vue+element table行内编辑想要实现行内编辑先要理清思路:1、点击编辑时,各字段需要由文本状态变为可编辑状态,因此需要有一个标识isEdit;2、编辑状态下,应该有保存按钮,点击保存按钮之后,数据由可编辑状态变为静态文本;3、点击添加按钮时,el-table需要追加一行空白可编辑状态的数原创 2021-01-05 11:17:12 · 4060 阅读 · 0 评论 -
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
实战场景描述实际开发过程中,需要Tab切换不同类型的数据,如果是每个Tab表单是静态数据还好,但通常情况下基本上涉及的都是table数据,页面打开时,我们看到的是一个打开的Tab内容,但其实vue是把所有的内容都渲染了,只是其他都隐藏了,这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿,最佳实现思路肯定是Tab切换时才进行实时加载。1、确定好每个Tab内容参考官网的例子改成我们的内容就好2、Tab切换事件今天的列子每个tab都涉及表格,为了方便后期维护和切换刷新,把每个T原创 2020-09-21 18:19:58 · 19733 阅读 · 17 评论 -
VUE+Element-ui实战之新增弹出框和编辑弹出框共用一个组件
实战场景描述我们在实际开发过程中,增删改查功能是最基础必不可少的,这里就少不了新增和编辑功能,通常都是点击按钮触发弹出框动作。基本上新增和编辑的表单是一致的,只不过一个是空的,而另一个需要赋原始值。因此抽出一个组件进行复用,会大大减小代码量。首先学会点击按钮触发弹出框动作:VUE弹窗加载另一个VUE页面1、el-table基本设置ActivityManage.vue全部代码:<template> <div class="mycontainer"&g原创 2020-09-09 14:53:46 · 11139 阅读 · 8 评论 -
VUE+Element-ui搭一个后台管理系统框架
整体布局确定一下我们后台框架的整体布局,就来个基础经典的再看下实现之后的效果:接下来一步一步走:1、webstorm新建项目接下来就等系统创建好后直接npm run serve,我们得到了一个默认的vue项目2、在项目中引入Element-UI参考官方说明:我们进行npm安装安装完毕之后,我们在main.js中进行引入:参考官方说明:整体引入:3、利用el-container设置页面布局参考官方说明:考虑到我们的页.原创 2020-09-08 17:22:59 · 2386 阅读 · 7 评论 -
Element-ui的环形进度条实现颜色渐变效果
UI效果图其实想实现环形渐变有很多种办法,比如我同事是用echarts,可是我真的很讨厌设置echarts的option要很多代码,我想用element的progress去实现,这样代码是最简洁的。用了之后是这样原始的效果,是不是真的要丑哭了,这个问题困扰了我两三天,我把其他vue页面做完之后,再回过头来解决这个历史遗留问题,今天来上班的时候就已经做好最坏的打算了,大不了就写5个option,然后就各种百度,一点一点试错当效果出来之后,我自己都忍不住发朋友圈主要参考例子ele原创 2020-07-29 15:18:01 · 6353 阅读 · 0 评论 -
Element-ui 步骤条功能拓展——动态生成步骤条
需求:最近在做应急预案的vue页面,需要有上一步、下一步等功能题外话:感觉使用vue+Element-ui来做,真的是方便很多很多,思路清晰,代码简洁。如果是按照以前的写法,肯定是要多个上一步、下一步按钮,并且每个按钮都要用js写相应的click事件。当然最后呈现出来的代码还是要看个人能力的凝练程度。...原创 2020-07-29 17:21:10 · 7406 阅读 · 0 评论 -
小细节:修改Element-ui的原始样式的小技巧——/deep/
1浏览器开发者模式定位需要修改的class2、<div>包裹要修改的组件3、加/deep/例:我想修改element-ui的步骤条背景颜色12、3、原创 2020-07-22 12:10:12 · 1492 阅读 · 2 评论 -
vue+Element实现文字列表轮番滚动效果
<template> <div style="position: relative;"> <p class="spans"><img src="../../assets/img/block-title-icon.png" alt=""><span class="tit">预警信息</span></p> <div v-if="!chuxians" ref="message" class="message.原创 2020-05-22 17:58:05 · 4317 阅读 · 2 评论 -
select因为选中而造成的样式上下浮动
为了说明问题,我也找不到合适的录屏工具,然后就用最笨的方法用手机拍出来的,不过这样也直观些吧先看下原来的效果,有没有看到上下浮动?出现这种情况,肯定很无语啊,然后就找度娘,还真找到了解决办法 <div style="float: left;padding-top: 20px;"> <el-select v-model="city" placeholder="请选择" @focus="initHome" value="1" style="wi..原创 2020-05-22 17:42:30 · 513 阅读 · 0 评论 -
利用Element的Tag标签简单实现类型管理
参考Element官方例子:Tag标签对于类型这个标识字段,对应一个单独表,也确实没有多余字段,我不想用form表单,然后直接参考了例子就拿来用了1、页面引入 <el-dialog :visible.sync="newsSetVisible" > <el-form :inline="true" class="demo-form-inline"> <el-tag原创 2020-05-20 16:56:11 · 1311 阅读 · 0 评论 -
Quill编辑器实现图片上传功能
我们引入Quill时是可以直接插入图片了,但是是Quill将图片转化成了base64格式,我们如果存数据库的话,肯定不是长久之计,而真正符合我们要求的便是图片上传之后返回图片路径,再插入图片1、点击图片小图标触发handler事件2、监听图片选择框的imgChange事件实现图片上传代码标红点是需要注意的,之前总是能上传成功,但是我insert的时候图片总是显示不出来,但是如果require一个已经存在的图片就可以正确显示,我感觉应该是异步造成的,因此设置了一个延时setTime原创 2020-05-20 16:36:00 · 4014 阅读 · 0 评论 -
VUE+Quill编辑器实现添加新闻功能
一个很典型的添加新闻功能,肯定离不了网页编辑器,然后有很多种选择,百度了大概说是quill和vue的兼容性比较好,网上也有很多在用,就跟风选择了!这是最终效果实现的过程肯定是有些曲折的,所以给各位指条康庄大道直接上全部代码:<template> <div id="app"> <div class="container"> <el-form label="添加新闻" :model="form" pr原创 2020-05-20 16:11:52 · 1703 阅读 · 3 评论 -
VUE利用addRoutes实现动态加载路由
可能是源于VUE前端新手吧(没办法,谁让公司没有专业前端,只能写后端的人硬着头皮去实现),这个问题花了将近两天的时间。最开始也是疯狂百度,是个相关网页都要去瞅一瞅,在这个过程中竟然有好多做出效果的都是参考花裤衩大神的,有兴趣的同学可以去看下我的代码也是比葫芦画瓢,实现思路大致都是一样的1、路由表在初始化的时候先设置好一些公共路由如登录页面2、利用v-for页面动态加载左侧菜单栏(因为我...原创 2020-04-25 17:21:32 · 757 阅读 · 2 评论 -
Element的select的实现省市区级联
因为有之前的经验教训,可能是layui和vue的冲突,一个简单的级联饶了我一天的时间layui的select实现省市区级联估计以后打死我都不想用layui了所以新做的增删改查页面统一用Element了,不知道比layui简单多少1、页面html <el-form-item label=项目所在地> <el...原创 2020-04-22 11:31:05 · 1598 阅读 · 0 评论