###
Vue2
Element UI `
el-upload`
组件自定义
删除按钮
为了在
Vue2 中使用
Element UI 的 `
el-upload`
组件时自定义
删除按钮的行为，可以通过覆盖默认的
上传行为以及监听特定事件来实现。具体来说，通过设置 `:http
-request` 属性来自定义
上传逻辑，并利用 `before
-remove` 或者 `on
-remove` 钩子函数控制文件移除前后的操作。
对于隐藏或修改
删除图标样式的情况，可以采用 CSS 来调整 `.
el-upload-list__item
-delete` 类的选择器[^1]：
```css
/* 修改
删除图标的外观 */
.
el-upload-list__item
-delete {
/* 定义新的样式规则 */
}
```
如果目标是完全替换原有的
删除功能，则可以在模板内添加额外的操作按钮并与之交互。例如，在 `<template>` 标签内部增加一个用于触发自定义
删除动作的新按钮，并将其放置于合适的位置上；同时确保该按钮能够访问到当前项的数据以便执行相应的业务逻辑处理。
另外一种方式是在 JavaScript 方法中拦截实际发生的
删除请求，从而允许开发者在此基础上加入更多验证或者其他前置条件判断。这通常涉及到对
组件实例上的 `$refs` 进行调用来获取列表数据并实施更精细的操作[^3]。
最后值得注意的一点是，当实现了上述任何一项更改之后，仍然要保留原始
组件必要的配置选项（比如 `action`），因为这些参数可能会影响整个
上传流程的工作机制[^2]。
#### 示例代码展示如何创建带有自定义
删除按钮的 `
el-upload`
组件
```html
<template>
<div class="custom
-upload">
<!
-- 使用 ref 获取
upload 实例
-->
<
el-upload
ref="
upload"
action="/your/
upload/endpoint"
:auto
-upload="false"
:file
-list="fil
eList"
:on
-preview="handlePreview"
:on
-change="handleChange"
list
-type="picture
-card"
>
<i slot="default" class="
el-icon
-plus"></i>
<div v
-if="!is
Uploading && fil
eList.length === 0">点击或将文件拖拽到这里</div>
<!
-- 自定义
删除按钮
-->
<span
v
-for="(file, index) in fil
eList"
:key="index"
style="position:absolute;top:
-8px;right:
-8px;z
-index:9;"
>
<
el-button @click.prevent.stop="removeFile(file)">
×
</
el-button>
</span>
</
el-upload>
<
el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</
el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
is
Uploading: false,
fil
eList: []
};
},
methods: {
handleRemove(file, fil
eList) { // 默认
删除回调
console.log('Default remove:', file);
},
handleChange(file, fil
eList) { // 文件状态改变时触发
this.fil
eList = fil
eList;
},
handlePreview(file) { // 查看图片预览
this.dialogImageUrl = file.url || URL.createObjectURL(file.raw);
this.dialogVisible = true;
},
removeFile(file) { // 自定义
删除方法
const idx = this.fil
eList.findIndex(f => f.
uid === file.
uid);
if (idx !==
-1) {
this.$confirm(`确定要
删除 ${file.name} 吗？`, '警告', {
confirmButtonText: '确认',
canc
elButtonText: '取消',
type: 'warning'
}).then(() => {
this.fil
eList.splice(idx, 1); // 移除指定索引处的对象
this.$message({
message: `${file.name} 已成功
删除`,
type: 'success'
});
}).catch(() => {});
}
}
}
};
</script>
```
这段内容描述了一个使用Element UI的上传组件实现的功能，该组件限制上传一个PDF文件，并在成功上传后执行特定的回调函数。样式设置隐藏了已成功上传文件的焦点状态，确保用户体验。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
