element-ui 的 el-collapse 请求数据时卡顿
在展开 el-collapse 列表时，如果需要获取远程数据，可能会出现明显的卡顿现象。这是因为 Vue.js 在动态渲染数据时，会进行 DOM 操作，而频繁的 DOM 操作会影响性能。
优化方案
可以使用 v-loading 指令，配合 nextTick 来优化这种卡顿现象：
为 添加 v-loading 指令：
在样式中隐藏 loading 时显示的提示元素：
.loading-tip { display: none;}
在组件的 mounted 生命周期钩子中，添加获取数据并显示 loading 提示的逻辑：
mounted() { this.loading = true; this.fetchData();}
在获取数据成功后，在 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 请求数据时展开列表卡顿问题？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1559751.html
微信扫一扫 
支付宝扫一扫 
