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

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 元素的样式，以满足不同的页面需求。

以上就是如何解决 Element UI 中 el-collapse 请求数据时展开列表卡顿问题？的详细内容，更多请关注硕下网其它相关文章！