![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element-ui
笑到世界都狼狈
我来到这个世上,就没打算活着回去
展开
-
element-ui弹框实现换行,el-tooltip换行
通过v-html 渲染字符串 最后添加 white-space: pre-line 即可实现 el-tooltip 换行,换行信息中的换行符使用\n。代码实现如下图所示,两种弹框都有尝试,都是可以实现换行的。方法一:需要使用v-html渲染。2、el-tooltip 换行。方法二:使用翻译 2024-06-08 12:45:00 · 204 阅读 · 1 评论 -
vue-element-admin实现后台接口返回路由,前端动态生成路由菜单
最近要开发新项目,与以往不同的是,路由菜单的生成都是需要后台管理的,接口直接返回给前端,前端根据接口的返回实现菜单及页面的显示。在菜单还没有给数据的时候,前端先自己在mock中模拟实现一下功能。翻译 2023-11-18 15:30:00 · 2385 阅读 · 0 评论 -
element-ui文件上传el-upload
el-upload文件上传,含进度条,添加进度条后如果文件未上传成功重新上传,进度条会不停的闪。中断请求即可。el-dialog关闭弹框时中断请求原创 2023-03-14 10:06:35 · 7455 阅读 · 3 评论 -
vue-element-admin中tab菜单实现拖拽
vue-element-admin框架,打开的菜单tab可以实现拖拽的功能原创 2023-03-02 17:40:31 · 1717 阅读 · 0 评论 -
element-ui日历组件el-calendar选中特定时间以及样式修改
element-ui日历的组件,标记特定时间,修改组件样式原创 2023-03-02 18:00:00 · 7885 阅读 · 0 评论 -
element-ui面包屑实现显示隐藏功能,而不是跳转链接
最近项目开发中有遇到一个需求,页面要实现面包屑的效果,但是实际上并不需要跳转链接,所以对面包屑做了一些修改。原创 2023-03-01 20:10:49 · 735 阅读 · 0 评论 -
element-ui设置input默认成整型
原因是:即使声明变量时,定义的是整型,后期页面中如果修改输入框中的值,该字段的类型将会由整型变成字符串,导致提交后台时报错。但是后续开发中,发现设置type="number"有bug,比如可以输入字母e等一些奇奇怪怪的bug。:precision="0"是限制输入正整数,输入小数点的时候,在鼠标遗失焦点时,会自动对输入框中的数字四舍五入。由于项目中,对向后台传值的参数类型限制比较严格,所以在整型的配置上出现了一些问题。:controls="false"不显示组件自带的"+","-"操作。原创 2023-02-06 17:47:03 · 2834 阅读 · 0 评论 -
element-ui 密码框显示小眼睛,点击可查看密码
在项目开发的实际需求中,用户有时候可能不确认自己输入的密码是不是正确的,所以想要查看一下自己的密码是否输入正确,这个时间就需要小眼睛,进行点击查看。原创 2023-02-03 15:04:59 · 5271 阅读 · 3 评论 -
element-ui tooltip的使用
在项目的开发中,有好多地方都需要对页面标签添加一些备注信息,方便用户可以更深入的了解内容的含义。,则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。总之,tooltip还是蛮好用的,项目中很多地方都有用到,即方便又美观。原创 2023-02-02 15:00:00 · 5359 阅读 · 0 评论 -
vue element-ui设置可填可选下拉框
在前端的项目开发中,好多地方都会用到下拉框,如果下拉框的内容比较少,用起来还是比较方便的,但是如果下拉框的内容比较多,有的时候需要快速的找到想要选中的内容时,有一个查询的功能还是很有必要的。element-ui有一个比较好的就是提供了可填可选的属性,这样用户可以自己输入内容查询,也可以自己手动选中,还可以自己输入下拉框没有的内容。总之,element-ui想要实现的一些功能,文档中几乎都有,遇到问题查看文档即可。只需要在select标签中加入filterable即可。原创 2023-02-02 13:23:25 · 5481 阅读 · 0 评论 -
vue-element-admin从下载到运行,完整过程
前段时间了解了一下vue-element-admin,按着官网搭建了一下,踩了不少坑,有时间就记录下来,方便以后用到了可以在看看。下面我讲的是用git克隆的方法,当然你也可以直接在github上下载。https://panjiachen.gitee.io/vue-element-admin-site/zh/一、搭建项目的前提条件1.克隆vue-element-admin需要用到git,如果没有安装git,命令会报错 (1)git下载地址:下载地址,下载比较慢 (2...原创 2022-04-15 12:24:36 · 14414 阅读 · 42 评论 -
element-ui限制时间插件el-date-picker的开始时间和结束时间之间间隔30天
项目中有个需求,开始时间选中后,结束时间自动填充成30天后的时间<当然,如果30天后的时间比当前时间大,那么填充当前时间到结束时间>。结束时间选中时,开始时间自动填充为结束时间的前30天效果如下图所示:代码如下:1.html部分<el-date-picker v-model="query.startDate" :clearable="false" type="date" format="yyyy-MM-dd" value-format="翻译 2022-01-27 14:09:28 · 2075 阅读 · 0 评论 -
控制element-ui table表格的全选与全不选
在项目开发中,表格下面单独写了一个复选框,要用这个复选框的勾选与不勾选来控制表格的全选与全不选状态,在官网种找到了toggleAllSelection和clearSelection两种方法实现了效果原创 2021-12-29 17:40:23 · 8000 阅读 · 5 评论 -
element-ui tabs切换时,不打印console.log
element-ui使用tabs后,发现tabs里面的组件在页面初始化的时候,全部打印出来了,后面点击切换的时候,将不会在打印对应组件的console.log解决方法: 1.初始化变量isTopoUpdate:true,isServerInfo:true 2.用v-if控制控制tabs 3.每次切换tab时,让当前点击的tab变量设置为true,让当前组件重新渲染 这样,来回切换的时候,v-if就可以重新渲染当前组件...转载 2021-08-30 15:43:59 · 436 阅读 · 0 评论 -
element-ui的tabs组件中使用echarts,在切换过程中,echarts宽度失效,只有100px
项目中遇到echarts表格在页面加载进去的时候,只显示100px,只有改变浏览器窗口大小的时候,宽度才会恢复正常。 后面找到解决方法,在echarts中添加v-if="activeBiosTab === 'processInfo'"具体效果如下图所示:代码如下:<div class="table-container"> <el-tabs ref="biosTabs" v-model="activeBios...翻译 2021-08-30 15:18:48 · 1523 阅读 · 0 评论 -
element-ui tabs点击一个子组件中的按钮或图标,切换到另一个tabs组件中
我在项目中,遇到一个tabs下放了两个组件,组件1是拓扑图,组件2是详情,我要点击组件1中拓扑图的节点跳转到组件2的详情中,于是就有了如下图所示的需求:简单的实现思路就是,点击按钮的时候,子组件向父组件传递tabs想要跳转页面的name,即可实现效果,项目具体实现结构如下图所示:注:主要实现是红色标记的部分简单代码如下:父组件:<template> <div class="app-container"> <el-tabs ref="t.原创 2021-08-24 19:56:27 · 4277 阅读 · 1 评论 -
element-ui,实现点击“加载更多“
首先,实现的大概效果如下:接下来代码如下:<el-dialogv-el-drag-dialogtitle="预览":visible.sync="dialogFormPreview"width="500px"> <div v-for="item in logList.slice(0,loadNum)" :key="item.index"> {{ item }} </div> <el-button type="warni.翻译 2021-07-27 08:40:35 · 1986 阅读 · 0 评论 -
<el-tabs>tab切换的使用
最近在写vue的项目,项目中有遇到element-ui。所以vue和element-ui都是新手菜鸟级选手,下面将<el-tabs></el-tabs>的使用方法总结如下:如图所示,切换tab时,页面效果: 代码如下:<template> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane labe...原创 2021-07-26 20:10:29 · 17523 阅读 · 0 评论