el-upload文件删除按钮点击事件
时间: 2023-11-21 15:58:34 浏览: 421
el-upload组件提供了多种方法来调用删除文件的操作,以触发相应的before-remove钩子、从组件的列表删除对应文件、on-remove钩子。以下是两种常用的方法:
1.使用$refs调用删除文件的操作:
```javascript
this.$refs.upload_attach.$refs['upload-inner'].onRemove(file);```
其中,upload_attach是el-upload组件的ref属性值,file是要删除的文件对象。
2.使用handleRemove方法调用删除文件的操作:
```javascript
this.$refs.upload_attach.handleRemove(file);
```
其中,upload_attach是el-upload组件的ref属性值,file是要删除的文件对象。
需要注意的是,以上两种方法都会触发before-remove钩子和on-remove钩子,并从组件的列表中删除对应的文件。
相关问题
el-upload禁用删除按钮
可以通过设置`:show-file-list`为`false`来禁用`el-upload`组件的删除按钮。示例代码如下:
```
<el-upload
class="upload-demo"
action="/upload"
:show-file-list="false"
:on-success="handleSuccess"
:on-remove="handleRemove">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
在上面的代码中,`:show-file-list`被设置为`false`,这将隐藏上传文件列表中的删除按钮。
el-upload隐藏删除按钮
你可以通过设置 `show-file-list` 属性为 `false` 来隐藏上传列表,然后通过 CSS 隐藏删除按钮。以下是一个示例:
```html
<el-upload
class="upload"
action="/upload"
:show-file-list="false"
>
<el-button slot="trigger" type="primary">上传文件</el-button>
</el-upload>
```
```css
.upload .el-upload-list__item .el-upload-list__item-status + .el-upload-list__item-actions {
display: none;
}
```
这个 CSS 样式选择器选择上传列表中的每个项目中的删除按钮,并将其隐藏。
阅读全文
相关推荐
















