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" />
相关文章
【sgTree】自定义组件:加载el-tree树节点整棵树数据,实现增删改操作。
【sgTree】自定义组件:加载el-tree树节点整棵树数据,实现增删改操作。
|
JavaScript
Vue报错:This dependency was not found: vuex in ./node_modules/babel-loader/lib
Vue报错:This dependency was not found: vuex in ./node_modules/babel-loader/lib
1614 0
Vue报错:This dependency was not found: vuex in ./node_modules/babel-loader/lib
|
JSON JavaScript 数据格式
Elementui Tree 树形控件删除子节点
Elementui Tree 树形控件删除子节点
540 1
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
安全 Ubuntu Linux
Linux系统无法启动或启动过程中卡住
【10月更文挑战第5天】
2664 3
|
机器学习/深度学习 自然语言处理
《机器学习调优指南:随机搜索与网格搜索的优劣剖析》
在机器学习中,超参数调优至关重要。网格搜索和随机搜索是两种常用方法。网格搜索通过穷举所有超参数组合,确保找到全局最优解,具有全面性和可解释性强的优点,但计算成本高昂、效率低。随机搜索则从超参数空间中随机抽取组合进行评估,计算效率高且灵活性强,但在结果上存在不确定性和缺乏方向性。两者各有优劣,实际应用中可根据资源和需求选择合适的方法,甚至结合使用以提升模型性能。
770 74
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
2880 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
缓存 容灾 网络协议
ACK One多集群网关:实现高效容灾方案
ACK One多集群网关可以帮助您快速构建同城跨AZ多活容灾系统、混合云同城跨AZ多活容灾系统,以及异地容灾系统。
|
前端开发 JavaScript
【项目笔记】:elementui下拉框数据太多造成页面卡顿怎么解决?
针对前端下拉框数据过多造成页面卡顿,元芳你怎么看?
979 2
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。

热门文章

最新文章