elementui中el-upload组件删除时闪动问题处理

如果在 ElementUI 中使用上传组件 `el-upload` 删除文件时出现了闪动问题，可以通过以下方法解决：

1. 设置 transition 的 name 属性

在使用上传组件时，可以在 `el-upload-list` 组件外层添加一个 `transition` 组件，并为其设置 `name` 属性，如下所示：

<transition name="fade">
  <el-upload-list
    // 其他配置项
  ></el-upload-list>
</transition>

然后在样式文件中添加如下代码：

.fade-enter-active,
.fade-leave-active {
  transition: opacity .2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

这样就可以为删除文件时的过渡添加渐隐效果，避免出现闪动问题。

2. 禁用 transition 组件的动画效果

如果您不需要为删除文件时添加过渡动画效果，可以直接禁用 `transition` 组件的动画效果，如下所示：

<transition :name="''">
  <el-upload-list
    // 其他配置项
  ></el-upload-list>
</transition>

这样就可以禁用 `transition` 组件的过渡效果，避免出现闪动问题。

相关问题

elementui中el-upload组件中list-type等于text时选中一个图片后隐藏上传样式

可以通过监听 `change` 事件，在回调函数中修改 `el-upload` 组件的样式来实现该功能。具体实现步骤如下：

1. 设置 `el-upload` 组件的 `list-type` 属性为 `text`，并且添加一个 `ref` 属性，用于在后面的代码中获取该组件的实例。

<el-upload
  ref="upload"
  :action="uploadUrl"
  :list-type="'text'"
  @change="handleChange"
>
  <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

2. 在 `change` 事件的回调函数中，获取 `el-upload` 组件的实例，并且根据需要修改其样式。例如，可以通过设置 `display` 样式为 `none` 来隐藏上传按钮和上传提示信息，同时显示选中的图片。

methods: {
  handleChange(file, fileList) {
    // 获取 el-upload 组件的实例
    const uploadInstance = this.$refs.upload.$el;

    // 修改 el-upload 组件的样式
    uploadInstance.querySelector('.el-upload__input').style.display = 'none'; // 隐藏上传按钮
    uploadInstance.querySelector('.el-upload__tip').style.display = 'none'; // 隐藏上传提示信息
    uploadInstance.querySelector('.el-upload-list').style.display = 'block'; // 显示选中的图片
  }
}

通过以上代码，当用户选择一个图片后，上传按钮和上传提示信息会被隐藏，同时选中的图片会被显示出来。

elementui中el-upload上传后隐藏上传按钮

可以通过设置`show-upload-button`属性为`false`来隐藏上传按钮。例如：

<el-upload
  class="upload-demo"
  action="//jsonplaceholder.typicode.com/posts/"
  :show-upload-button="false"
  :on-success="handleSuccess"
  :before-upload="beforeUpload">
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

在上面的代码中，`show-upload-button`属性被设置为`false`，所以上传按钮被隐藏了。