el-upload显示删除按钮
时间: 2025-01-08 07:39:35 浏览: 107
### 配置 `el-upload` 组件以显示文件列表中的删除按钮
为了使 `el-upload` 组件能够显示文件列表以及其中的删除按钮,需设置特定属性来控制组件行为。具体来说,应关注以下几个方面:
- **list-type 属性**:当设置为 `'picture'` 或者 `'picture-card'` 时会启用缩略图模式;而默认值 `'text'` 则适用于普通文件列表[^1]。
- **show-file-list 属性**:该布尔型属性决定了是否展示已上传文件的信息,默认情况下其值为 `true` ,即开启状态。这表示如果希望看到包含有操作项(如删除按钮)在内的文件详情,则无需特别修改此项。
- **on-preview 和 on-remove 方法**:这两个钩子函数分别对应预览和移除事件处理逻辑,在定义这些回调的同时也间接影响到了界面上相应按钮的存在与否。特别是对于后者而言,只要提供了有效的 `on-remove` 函数就能够在每一条记录旁边显示出“×”图标以便用户点击触发删除动作[^2]。
下面给出一段简单的代码片段作为示范,展示了如何利用上述提到的各项配置选项来构建带有删除功能的文件上传区域:
```html
<template>
<div class="upload-demo">
<el-upload
:action="yourServerUrl"
list-type="text" <!-- 可选 'picture', 'picture-card' -->
:file-list="fileList"
:on-remove="handleRemove"
multiple
>
<button type="button">Click to upload</button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
yourServerUrl: '/server/api/upload',
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
};
},
methods: {
handleRemove(file, fileList) {
console.log('File removed:', file);
console.log('Remaining files:', fileList);
}
}
};
</script>
```
阅读全文
相关推荐


















