element-ui 的 el-collapse 请求数据时卡顿
在展开 el-collapse 列表时，如果需要获取远程数据，可能会出现明显的卡顿现象。这是因为 Vue.js 在动态渲染数据时，会进行 DOM 操作，而频繁的 DOM 操作会影响性能。
优化方案
可以使用 v-loading 指令，配合 nextTick 来优化这种卡顿现象：
<el-collapse-item v-loading="loading">
.loading-tip {
display: none;
}mounted() {
this.loading = true;
this.fetchData();
}fetchData() {
this.$axios.get('/api/data').then(res => {
this.$nextTick(() => {
this.loading = false;
this.expanded = true;
});
});
}这样，在展开面板时，loading 提示会先显示，并在数据获取成功后立即移除，从而避免了卡顿现象。v-loading 指令可以根据需要自定义 loading 元素的样式，以满足不同的页面需求。
以上就是如何解决 Element UI 中 el-collapse 请求数据时展开列表卡顿问题？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
566
