ElementUI el-collapse 加载数据时的卡顿优化
在使用 ElementUI 的 el-collapse 时,展开组件时需要从接口获取数据,这可能会导致卡顿。
原因
卡顿的原因在于,展开 el-collapse 时,Vue 会动态渲染数据,这会占用大量时间。
优化建议
可以使用以下步骤优化:
<el-collapse-item v-loading="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); } }
handleExpand(name) { this.loading = true; this.$nextTick(() => { // 数据加载完成后 this.loading = false; this.$refs[name].open(); }); }