ElementUI折叠组件bug问题及解决

最新推荐文章于 2025-02-19 10:08:51 发布

接着奏乐接着舞。

最新推荐文章于 2025-02-19 10:08:51 发布

阅读量4.7k

点赞数 6

分类专栏：工作经验总结文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/wanghaoyingand/article/details/122469499

版权

工作经验总结专栏收录该内容

95 篇文章

订阅专栏

本文针对嵌套折叠组件数据渲染及Codemirror插件使用中出现的问题进行深入剖析，并提出了解决方案。首先解决了多组嵌套折叠组件点击后数据残留问题，通过在点击时清空数组并使用el-collapse标签来隔离各个组件；其次针对Codemirror插件在折叠面板中出现样式错误及数据延迟显示的问题，提出了利用key值变化触发重新渲染的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.1场景：

1.2解决思路：

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

2.1场景：

2.2 原因：

2.3 解决方法：

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" />