ElementUI折叠组件bug问题及解决

简介: ElementUI折叠组件bug问题及解决

1.嵌套的折叠组件数据渲染问题


1.1场景:

v-for渲染的多个折叠组件,且每个折叠组件里面嵌套子折叠组件。

嵌套的多组折叠组件,点击其他组的下拉框的数据后显示的子折叠组件数据显示的是之前的数据,得重新点一下下拉框才能刷新数据。

1.2解决思路:

由于是v-for渲染的多个折叠组件,可以点击最外层的折叠时,先把渲染数据的数组清空,然后把子折叠组件加上el-collapse标签,这样就不会互相影响了。

2.折叠组件中使用codemirror插件问题


2.1场景:

1.样式不对

2.需要点击一次之后才能显示编辑框里面的数据

2.2 原因:

应该数据没有初始化

2.3 解决方法:

使用 :key给其绑定一个ID,在折叠组件的change事件的回调函数中ID++,达到重新渲染的目的。

methods中:
// 折叠面板中,嵌套的子集折叠面板
    clearCollapse () {
      // 更新key值用来解决bug,使下拉出现JSON--解决样式和点击一次才出现数据
      this.en_descriptionID++
      this.selectKeyId++
    },
给子组件:
    <JsonEdit :value="item.cve_info.en_description" :key="en_descriptionID" />
相关文章
|
4月前
|
Web App开发 存储 前端开发
vue2精简方式实现鼠标在方框内拖拽效果源码
vue2精简方式实现鼠标在方框内拖拽效果源码
119 3
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
5月前
ElementUI——elementui重复引入样式
ElementUI——elementui重复引入样式
49 1
|
6月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
232 0
|
6月前
|
JavaScript
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
419 0
|
8月前
|
前端开发
Vue+ElementUI前端添加展开收起搜索框按钮
Vue+ElementUI前端添加展开收起搜索框按钮
416 0
|
8月前
el-tree饿了么elementUI tree树结构插件设置全部展开折叠
el-tree饿了么elementUI tree树结构插件设置全部展开折叠
|
前端开发 JavaScript
ElementUI el-tree一键折叠或展开
ElementUI el-tree一键折叠或展开
490 0
ElementUI el-tree一键折叠或展开
|
移动开发 JavaScript 前端开发
项目中遇到的bug:elementui走马灯
大家应该都知道当走马灯轮播前两张图片和后两张图片的轮播方向和后面图片的方向不一致,就很尴尬。在网上查阅了好多博客基本都是手动添加两张图片,比如:[1,2]改成[2,1,2,1]。在项目中我们显然不可能把数据写死,这是不现实的。
150 0