element?upload?鉤子函數(shù)的坑及解決
element upload 鉤子函數(shù)的坑
因?yàn)樾枨笮枰覍lement 的upload組件放在了el-dialog中，但是坑就在這
看圖片的上方是不是可以看到上傳成功四個(gè)大字，但是它并不是真的在上傳成功后顯示出來的，只要頁(yè)面加載成功，打開和關(guān)閉el-dialog都會(huì)出來這四個(gè)大字，來看代碼
這是upload部分設(shè)置代碼：
（請(qǐng)忽略方法名稱的不規(guī)范，這里只做個(gè)演示）
on-success調(diào)用的方法
success () {
? this.$message.success('上傳成功')
}以上可以看出我們并沒有上傳文件，但是卻觸發(fā)了上傳成功的鉤子，不僅僅on-success是這樣，on-error也是會(huì)被這樣觸發(fā)。
所以最后我把代碼改成了如下：
el-upload部分代碼：
<el-upload ? ? ? ? class="upload-demo" ? ? ? ? ref="upload" ? ? ? ? drag ? ? ? ? :action="uploadBusinessType" ? ? ? ? accept=".xls, .xlsx, .csv" ? ? ? ? :auto-upload="false" ? ? ? ? :on-success="handleAvatarSuccess" ? ? ? ? multiple ? ? ? >
方法的代碼：
handleAvatarSuccess(...params) {
? ? ‘這里代碼就不在表述'
? ? }…params會(huì)返回一個(gè)數(shù)組，里邊包含了這么一些東西
其中包含的有后端返回的請(qǐng)求成功的狀態(tài)值，最終我是通過這個(gè)來判斷是否上傳成功，規(guī)避了在打開和關(guān)閉el-dialog就觸發(fā)鉤子的問題
element-ui中組件函數(shù)鉤子自帶參數(shù),不能添加參數(shù)問題
在element-ui中的組件函數(shù)鉤子一般都是自帶參數(shù)如：
//上傳組件 <el-upload ? class="upload-demo" ? action="https://jsonplaceholder.typicode.com/posts/" ? :on-preview="handlePreview" ? :on-remove="handleRemove" ? :before-remove="**beforeRemove**" ? multiple ? :limit="3" ? :on-exceed="handleExceed" ? :file-list="fileList"> ? <el-button size="small" type="primary">點(diǎn)擊上傳</el-button> ? <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload>
API中解釋：
on-remove 文件列表移除文件時(shí)的鉤子 function(file, fileList)
也就是上面的beforeRemove函數(shù)自帶file, fileList這兩參數(shù)
beforeRemove（file, fileList）{
//就這兩參數(shù)
}那么想要帶自己的參數(shù)呢，，尤其一般在表格中的上傳，肯定要攜帶當(dāng)前一行的參數(shù)（動(dòng)態(tài)參數(shù)）時(shí)；
我們對(duì)before-remove屬性修改
//上傳組件
<el-upload
? class="upload-demo"
? action="https://jsonplaceholder.typicode.com/posts/"
? :on-preview="handlePreview"
? :on-remove="handleRemove"
? :before-remove="（file,fileList）=>{
? ? ?return beforeRemove（file,fileList,data）
}"
? multiple
? :limit="3"
? :on-exceed="handleExceed"
? :file-list="fileList">
? <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
? <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>在before-remove上在return 一個(gè)函數(shù)，并攜帶data（自己想要的參數(shù)）
這樣在函數(shù)beforeRemove中就可以拿到data了
beforeRemove（file,fileList,data）{
debugger
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這兩天學(xué)習(xí)了Vue.js 感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法
這篇文章主要介紹了Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中的應(yīng)用
作為一個(gè)曾經(jīng)的Java?coder,當(dāng)?shù)谝淮慰吹絡(luò)s里面的裝飾器Decorator,就馬上想到了Java中的注解,當(dāng)然在實(shí)際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-08-08
基于VUE實(shí)現(xiàn)簡(jiǎn)單的學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)簡(jiǎn)單的學(xué)生信息管理系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
最近在學(xué)習(xí)Vue教程,下面這篇文章主要給大家介紹了關(guān)于vue中api統(tǒng)一管理的那些事,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-04-04
vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue 動(dòng)態(tài)組件用法示例小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)組件用法,結(jié)合實(shí)例形式總結(jié)分析了vue 動(dòng)態(tài)組件基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03