使用element upload上传组件如何去掉删除按钮

更新时间：2023年07月18日 10:54:42 作者：白开水z

这篇文章主要介绍了使用element upload上传组件如何去掉删除按钮

element upload上传组件去掉删除按钮

加个disabled 就可以了

在这里插入图片描述

效果图

在这里插入图片描述

element-ui el-upload(上传组件) 上传图片后，隐藏上传按钮

思路

上传成功以后，隐藏 .el-upload--picture-card 。

HTML部分

<el-upload :class="{hide_box: upload_btn}"
          :action="`#"
           list-type="picture-card"
           :on-success="handleSuccess"
           :auto-upload="true">
           // 其他代码
</el-upload>

data部分

data() {
   return {
        upload_btn: false, // 是否隐藏上传图片按钮
    };
},

methods 部分

// 上传成功
handleSuccess(response, file, fileList) {
     // 上传成功后，隐藏上传按钮
     this.upload_btn = true;
 },

CSS 部分

.hide_box /deep/ .el-upload--picture-card {
    display: none;
}

说明：:on-success="handleSuccess" 这个是上传成功后触发，没成功不触发，如果没后台，只是想测试，可以换成 :on-change="handleSuccess"，这个是状态修改后就触发

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中内置指令与自定义指令语法详解
这篇文章主要为大家介绍了Vue中内置指令与自定义指令语法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
vue3移动端嵌入pdf的多种方法小结
这篇文章主要介绍了vue3移动端嵌入pdf的多种方法小结,使用embed嵌入有好处也有缺点,本文给大家讲解的非常详细,需要的朋友可以参考下
2023-10-10
tdesign和vue的子组件关闭是父组件执行方法
这篇文章主要介绍了tdesign和vue的子组件关闭是父组件执行方法,需要的朋友可以参考下
2006-06-06
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
这篇文章主要介绍了 Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue中正确使用Element-UI组件的方法实例
这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
Vue v-for中的 input 或 select的值发生改变时触发事件操作
这篇文章主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue3的hooks用法总结
vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，这篇文章主要介绍了一文掌握vue3中hooks的介绍及用法,需要的朋友可以参考下
2023-04-04
复刻画龙产品vue实现新春气泡兔
这篇文章主要为大家介绍了复刻画龙产品之使用vue实现新春气泡兔示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
element的el-table自定义最后一行的实现代码
最后一行要显示一些其他结果,用的是element ui 自带的数据总计的属性；返回一个数组,会按下标进行展示,这篇文章主要介绍了element的el-table自定义最后一行的实现代码,需要的朋友可以参考下
2024-03-03
Vuex Store 数据在页面刷新后丢失的解决方法
当我们使用 Vue.js 和 Vuex 进行状态管理时,一个常见的问题是页面刷新会导致 Vuex store 中的数据丢失,本文将详细介绍解决 Vuex Store 数据在页面刷新后丢失的方法,感兴趣的朋友一起看看吧
2024-08-08