如何优化 ElementUI el-collapse 展开时加载数据的卡顿问题？

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《如何优化 ElementUI el-collapse 展开时加载数据的卡顿问题？ 》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

ElementUI el-collapse 加载数据时的卡顿优化

在使用 ElementUI 的 el-collapse 时，展开组件时需要从接口获取数据，这可能会导致卡顿。

原因

卡顿的原因在于，展开 el-collapse 时，Vue 会动态渲染数据，这会占用大量时间。

优化建议

可以使用以下步骤优化：

1. 给 el-collapse-item 组件添加 v-loading 属性：

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

2. 为组件添加 loading 样式：

.el-loading-mask {
  background: rgba(255, 255, 255, 0.8);
  animation: loading 1.4s infinite linear;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3. 在点击展开时添加 loading，数据加载完成后移除 loading 并展开面板：

handleExpand(name) {
  this.loading = true;
  this.$nextTick(() => {
    // 数据加载完成后
    this.loading = false;
    this.$refs[name].open();
  });
}

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。