elementui el-collapse 加载数据时的卡顿优化
在使用 ElementUI 的 el-collapse 时，展开组件时需要从接口获取数据，这可能会导致卡顿。
原因
卡顿的原因在于，展开 el-collapse 时，Vue...
elementui el-collapse 加载数据时的卡顿优化
在使用 ElementUI 的 el-collapse 时，展开组件时需要从接口获取数据，这可能会导致卡顿。
原因
卡顿的原因在于，展开 el-collapse 时，Vue 会动态渲染数据，这会占用大量时间。
优化建议
可以使用以下步骤优化：
- 给 el-collapse-item 组件添加 v-loading 属性：
PHP
<el-collapse-item v-loading="loading">- 为组件添加 loading 样式：
PHP
.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);
}
}- 在点击展开时添加 loading，数据加载完成后移除 loading 并展开面板：
PHP
handleExpand(name) {
this.loading = true;
this.$nextTick(() => {
// 数据加载完成后
this.loading = false;
this.$refs[name].open();
});
}以上就是如何优化 ElementUI el-collapse 展开时加载数据的卡顿问题？的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
发表评论