如何解决 Element UI 中 el-collapse 请求数据时展开列表卡顿问题？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《如何解决 Element UI 中 el-collapse 请求数据时展开列表卡顿问题？ 》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

element-ui 的 el-collapse 请求数据时卡顿

在展开 el-collapse 列表时，如果需要获取远程数据，可能会出现明显的卡顿现象。这是因为 Vue.js 在动态渲染数据时，会进行 DOM 操作，而频繁的 DOM 操作会影响性能。

优化方案

可以使用 v-loading 指令，配合 nextTick 来优化这种卡顿现象：

1. 为 添加 v-loading 指令：

<el-collapse-item v-loading="loading">

2. 在样式中隐藏 loading 时显示的提示元素：

.loading-tip {
  display: none;
}

3. 在组件的 mounted 生命周期钩子中，添加获取数据并显示 loading 提示的逻辑：

mounted() {
  this.loading = true;
  this.fetchData();
}

4. 在获取数据成功后，在 nextTick 中移除 loading 提示并展开面板：

fetchData() {
  this.$axios.get('/api/data').then(res => {
    this.$nextTick(() => {
      this.loading = false;
      this.expanded = true;
    });
  });
}

这样，在展开面板时，loading 提示会先显示，并在数据获取成功后立即移除，从而避免了卡顿现象。v-loading 指令可以根据需要自定义 loading 元素的样式，以满足不同的页面需求。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~