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" />
相关文章
|
1月前
|
Web App开发 存储 前端开发
vue2精简方式实现鼠标在方框内拖拽效果源码
vue2精简方式实现鼠标在方框内拖拽效果源码
46 3
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
2月前
ElementUI——elementui重复引入样式
ElementUI——elementui重复引入样式
28 1
|
2月前
|
前端开发
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
231 0
|
3月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
112 0
|
3月前
|
JavaScript
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
240 0
|
3月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
136 0
|
5月前
|
JavaScript
vue中多组件调用,实现上下分屏,上下拖动
vue中多组件调用,实现上下分屏,上下拖动
176 0
|
5月前
|
前端开发
Vue+ElementUI前端添加展开收起搜索框按钮
Vue+ElementUI前端添加展开收起搜索框按钮
279 0
|
11月前
|
前端开发
elementUI隐藏组件
elementUI隐藏组件
102 0