
vue+element项目bug
文章平均质量分 54
别忘了微笑_cuicui
这个作者很懒,什么都没留下…
展开
-
elementUI table固定列底部滚动轴无法拖动问题
解决方法:<style scoped lang="scss"> /deep/.el-table--scrollable-x .el-table__body-wrapper { z-index : 1; } </style>原创 2021-01-13 17:10:18 · 676 阅读 · 0 评论 -
elementUI表格气泡乱串、闪烁、位置偏移问题解决(自制气泡,计算位置,箭头永远指向当前元素)
elementUI表格中插入气泡,会出现bug"来回切换tab页气泡会乱串",导致这个问题的原因是,elementUI底层是通过js绘制的气泡,挂在到body中,通过display:none来控制显隐;当我们来回切换tab页的时候,时而出现display:block;的情况,这时候上一个界面的气泡就再新界面出现,导致气泡乱串了。为了解决这个问题,尝试过好几种方式,目的就是让气泡隐藏成功或者销毁成功,但是发现这种思路只会让气泡乱串出现的频率降低,并不能从根本上解决问题,而且还会带来新的界面bug。下面先介绍原创 2020-09-10 11:17:29 · 1185 阅读 · 0 评论 -
纯css绘制气泡,支持适应最大宽度,最大高度
https://blog.youkuaiyun.com/CuiCui_web/article/details/107225702之前这边文章中的方式是利用js来进行控制的,然后有一个局限,不支持适应最大宽度;另外如果强行设置宽度比较大,会被左侧菜单遮挡,即使给z-index:9999,也没用。看下图展示,2种方式解决之前的不足。(后续可能会更新elementUI表格种气泡乱串问题解决方案)公共部分数据定义:data(){ return{ business: { id原创 2020-09-07 22:56:31 · 408 阅读 · 0 评论 -
wacth监听是值改变才会执行,那么组件传值,值没变,这时候需要进行操作,怎么办呢?
看似这个问题是无解的,组件传值,值没变,然后启用了keep-alive,生命周期函数,只有初次有效。这时候该怎么去解决这个问题呢?思路: 我们让传值的这个字段发生变化,并且只要操作了,就让他与众不同。怎么与众不同呢,拼接随机数? 随机数也是可以相同的; 我们可以拼接时间。在传值前进行拼接,这时候永远都会执行watch监听,然后在watch监听中进行截取。父组件中:(引入子组件,并传值)子组件watch监听中:这里注意,如果界面进行缓存了,在tab切换,生命周期失效的时候,在父组件的钩子函数中原创 2020-08-20 11:56:12 · 837 阅读 · 0 评论 -
elementUI表格中气泡位置偏移
1、气泡位置偏移这个问题出现,是由于,需求要求打破了常规模式,要求“elementUI表格内容根据高度来判断是否显示气泡”,这时候我们会发现,气泡在底层代码中是以实际高度的位置来判断气泡显示的位置,而不是以我们在样式中设置的height这个判断。“elementUI表格内容根据高度来判断是否显示气泡” 这个需求的实现见文章 https://blog.youkuaiyun.com/CuiCui_web/article/details/106531997由上图就可以看到,这个问题的根本原因就是上面说的,底层中是以实原创 2020-08-13 17:03:59 · 2661 阅读 · 0 评论 -
vue踩坑之生命周期失效、路由带参跳转刷新无数据等问题解决
1、 生命周期函数失效 界面进行跳转的时候,跳转界面首次执行mounted方法,之后跳转进入,界面数据不刷新。解决方法:即/** 使用路由钩子函数进行执行 */beforeRouteEnter (to, from, next) { next(vm => { // 这里的vm指的就是vue实例,可以用来当做this使用 })},bef...原创 2020-01-02 12:53:14 · 2249 阅读 · 0 评论 -
elementUI在IE中的常见问题集合(持续更新)
1、IE上弹窗关闭时,会闪烁问题 (在全局加上下面样式)// 防止在IE上弹窗关闭时抖动.el-dialog__wrapper{ &.dialog-fade-leave-active{ -ms-animation:none !important; }}2、IE上打开弹窗,弹窗被遮罩层遮罩在el-dialog标签上加上:append-to-body=...原创 2020-01-02 09:15:40 · 1219 阅读 · 3 评论 -
elementUI表格树动态合并列问题处理(最终版,---新需求)
在之前的一篇博客中针对这个问题,写了解决方法。现在是加了新需求,发现之前的算法有一些不足之处,现在进行纠正。目前表格的需求是: 评估人/评估分数/加减分说明,这个组合,根据评估人相同,就列合并;指标项目,评估人是为空的,这个组合都不合并; 处理人/处理分数/加减分说明,这个组合,是动态表头,有可能只有一个组合,也有可能有2个组合,也有可能是3个组合;处理人是全合并...原创 2019-12-30 16:25:37 · 2949 阅读 · 0 评论 -
二次封装elementUI级联选择器组件(父关联子,子不关联父)
现在有这样的一个需求,需要选中父,子全部勾选,且显示的是勾选中的所有值;如果只勾选子,父不关联在内;如果勾选了所有的子节点,且父节点不选中,默认每个节点下都有人,所以,勾选所有的子,不代表就是选中了父下的直接人员。实现的效果动图如下:1、创建一个vue文件(包含新增,修改是的回显),如myCascader.vue<!-- 改装后的级联选择器,父关联子,子不关联父-->...原创 2019-12-19 16:22:07 · 3399 阅读 · 3 评论 -
vue自定义指令之防止表单重复提交
1、新建一个js文件preventReClick.js, export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick', { inserted (el, binding) { console.log(el, binding) ...原创 2019-12-13 14:28:47 · 973 阅读 · 0 评论 -
vue之切换tab栏保留查询条件(vue+elementUI+D2admin)
有tab栏切换通常都是会直接刷新界面,现在有一个需求就是说当我点击tab切换或者菜单切换的时候,原本写的查询不变。1、在layout中加入keep-alive,进行缓存这时候,当你输入查询条件,进行切换的时候,你会发现, 效果达到了。但是如果你够细心,你会发现,如果有联动的界面,从a界面点击一条数据进入b界面,数据不再更新,一直保持着第一次的那条数据。为什么会这样呢?原因是...原创 2019-12-06 15:47:01 · 5051 阅读 · 0 评论 -
elmentUI之修改表格文字过多tip提示的默认样式
常规写法这样写就给可以。.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after { //border-top-color: #f0f6fb!important; border-top-color: #0a92d9!important;}.el-tooltip__popper.is-da...原创 2019-11-02 09:42:29 · 699 阅读 · 0 评论 -
导出文件接口报300,前端解决方案
当后台返回的报错信息是一个流的时候,前端不能直接拿到信息,需要进行转化。axios({ url: '接口地址', method: 'post', responseType: 'blob', headers, // 请求头 data // 导出数据传参}).then((res) => { if(res){ // 将流转换为json var reader ...原创 2019-04-19 10:21:20 · 1313 阅读 · 0 评论 -
elementUI编辑与新增弹窗结合表格常见bug解决方案
3、新增、编辑弹窗出现的问题编辑弹窗修改数据后,点击取消,表格数据变化;编辑弹窗修改后,不做任何操作,点击下一条数据进行编辑,取消,数据被上一条覆盖,需要刷新页面才能还原;新增和修改弹窗的数据发生紊乱等等问题的解决方法1、组件弹窗中的props定义props: { ObjectData: { require: true, type: Object, def...原创 2019-05-14 12:29:22 · 3203 阅读 · 0 评论 -
elementUI远程搜索功能遇到的坑(el-autocomplete)
本文主要是解决下拉框根据返回值隐藏 动态设置建议列表值等问题结构写法<el-autocomplete v-model.trim="invoiceHeaderInformation.gmfMc" :fetch-suggestions="querySearch" :trigger-on-focus="false" type="text" :popper-cla...原创 2019-07-15 10:31:31 · 11438 阅读 · 11 评论 -
vue中异步遇到到的坑(解决axiso异步执行问题)
项目中出现一个接口不同界面反复调用的情况时候,通常呢都会去做一步分装,直接调用。在这个过程中,就会出现一个坑,调用及执行了,导致封装方法中return的数据还没拿到,就已经执行。下面看一下问题出现时的写法去相应界面进行调用此时的结果是拿不到值。那么改如何解决这个问题,下面提供了两种方式进行封装代码。去相应界面调用的方法是一样的。方式一: 用Promiseexp...原创 2019-07-31 15:26:56 · 5980 阅读 · 4 评论 -
解决ie9/ie10项目报错,打不开问题
常规方法我们在ie上报语法错误,都会先进行安装npm install --save babel-polyfill,然后引包import 'babel-polyfill';但是现在出现一些特殊的情况。比如在ie11上能够正常显示,但是用ie10或ie9项目会打不开,并且报语法错误。如下图:点击错误会进入到一个错误定位的地方,项目上传到服务器会直接定位到错误的地方如下图或在...原创 2019-08-09 13:55:58 · 848 阅读 · 0 评论 -
elementUI菜单刷新界面选中与返回首页不选中问题
首先返回首页不选中问题,这个时候我们需要查看elementUI的版本r如果是低版本的,需要进行修改版本,重新运行npm install。在这里2.9.2这个版本是支持$route监听的。watch: { '$route'(to, from) { },},如果上面两步完成,返回首页,菜单不选中问题还没解决,那么恭喜你,你成功踩进了另一个坑里。当我们对:d...原创 2019-08-10 15:15:27 · 1267 阅读 · 0 评论 -
elementUI弹窗之坑(dialog的遮罩层在弹出层的上面,子弹窗执行保存(确定)按钮之后还要执行取消按钮,Prop being mutated: "showTree")
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题:弹窗套弹窗出现蒙层、弹窗套弹窗,子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c...原创 2019-09-07 09:52:25 · 2647 阅读 · 1 评论 -
elementUI表格树动态合并列问题处理
此篇为第一版,写法有问题,最终版请查看https://blog.youkuaiyun.com/CuiCui_web/article/details/103767614首先看一下效果图,根据评估人来进行合并(有相同内容的列都可以通过这种方式进行合并列)<el-table :data="tableData" ref="tableDialog" ...原创 2019-09-10 20:53:24 · 2850 阅读 · 0 评论 -
echarts绘制图形在线上环境下路由跳转后不显示bug
遇到一个很奇葩的bug,用echarts绘制的饼图 柱状图,在本地环境下是没有问题的,但是线上环境唯独谷歌浏览器出现了一个奇怪的bug: 从当前界面跳转到详情界面,再从详情界面返回当前界面,echarts绘制的饼图 柱状图都不显示了;稍微变动一下屏幕分辨率,他又是显示出来了;线上环境大断点调试,数据也拿到了。目前呢,还没发现这个bug的来由,但是解决方法到时候出现了,利用重载解...原创 2019-10-09 09:00:09 · 1171 阅读 · 2 评论 -
导出文件出现undefind的2种情况及解决措施
导出文件(根据查询条件进行导出)文件存在打不开的情况问题:导出文件(根据查询条件进行导出)文件存在打不开的情况(捷豹路虎预算项目)描述:当输入等值查询条件时,文件可以打开;当输入模糊查询条件,点击导出按钮,文件打不开解决方法:后台在查询的时候是做的模糊查询,但是在导出数据的时候,做的是等值查询,也就造成了没有相应的数据,导出来的是一个undefind;后台应该在导出 数据的时候也做模糊查询...原创 2019-04-03 17:19:39 · 10659 阅读 · 3 评论