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

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();
  });
}