使用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" 這個是上傳成功后觸發(fā)，沒成功不觸發(fā)，如果沒后臺，只是想測試，可以換成 :on-change="handleSuccess"，這個是狀態(tài)修改后就觸發(fā)

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于VUE移動音樂WEBAPP跨域請求失敗的解決方法
這篇文章主要介紹了基于VUE移動音樂WEBAPP跨域請求失敗的解決方法,需要的朋友可以參考下
2018-01-01
vue使用video.js進行視頻播放功能
video.js是一個擁有h5背景的網絡視頻播放器，同時支持h5以及Flash視頻播放，這篇文章主要介紹了vue中使用video.js進行視頻播放,需要的朋友可以參考下
2019-07-07
vue使用Print.js打印頁面樣式不出現(xiàn)的解決
這篇文章主要介紹了vue使用Print.js打印頁面樣式不出現(xiàn)的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
一文帶你重新學習Vue中的按鍵監(jiān)聽和鼠標監(jiān)聽
這篇文章主要為大家詳細介紹了Vue中的按鍵監(jiān)聽和鼠標監(jiān)聽的常見實現(xiàn)方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-07-07
element-ui中el-table不顯示數據的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數據的問題解決,這是最近在做列表首頁時遇到的一個問題,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-07-07
vue elementUI tree樹形控件獲取父節(jié)點ID的實例
今天小編就為大家分享一篇vue elementUI tree樹形控件獲取父節(jié)點ID的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue 虛擬列表的實戰(zhàn)示例
這篇文章主要介紹了Vue 虛擬列表的實現(xiàn)示例，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下
2021-03-03
Vue.js報錯:Duplicate?keys?detected:‘xxx‘問題的解決
文章介紹了在Vue.js中解決`Duplicate?keys?detected`錯誤的步驟,包括定位重復的key、確保key的唯一性以及在必要時進行去重或添加前綴,同時,文章還提供了一個性能對比,建議在`v-for`中使用唯一且穩(wěn)定的字段作為key,索引只在靜態(tài)列表中使用,以避免警告并提升性能
2025-11-11
element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
使用vxe-table合并單元格、分組列頭的詳細用法舉例
這篇文章主要介紹了使用vxe-table合并單元格、分組列頭的詳細用法,vxe-table通過rowspan和colspan配置合并單元格,使用columns的group屬性實現(xiàn)列頭分組,文中給出了詳細的代碼示例,需要的朋友可以參考下
2025-06-06