使用element 上传组件时界面抖动

稀饭52

于 2021-01-08 09:39:31 发布

阅读量2.5k

点赞数 3

本文链接：https://blog.youkuaiyun.com/qq_26314225/article/details/112345119

版权

在使用ElementUI的上传组件时遇到一个问题，即上传过程中loading元素导致图片显示异常。问题根源在于上传完成后对fileList数组的push操作。为解决此问题，可以考虑避免使用push，直接赋值给fileList，或者通过CSS隐藏上传过程中的loading元素。这两种方法都能有效防止图片显示异常，其中隐藏loading元素的方法实现更为简洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景描述

在使用 element ui 的上传组件时，会出现一个上传进度的 loading 元素，导致形成一个图片被挤到后面，上传完成之后又回来的效果

经过尝试，主要由于在上传完成之后 push 操作了 upload 组件的 fileList 数组；

this.fileList.push({
  name: this.data.key,
  url: imgUrl + this.data.key,
})

解决实现

1.避免 push,而是直接赋值

// 看项目场景影响
this.fileList = [
  {
    name: this.data.key,
    url: imgUrl + this.data.key,
  },
]

2. 隐藏 loading 元素

/* 推荐，实现简单 */
.el-upload-list__item.is-ready,
.el-upload-list__item.is-uploading {
  display: none !important;
}