element-ui upload組件 on-change事件 傳自定義參數


項目中有一個功能,要支持同時創建1到多個相同的模塊,每個模塊對應自己的上傳文件,同時文件上傳為手動上傳。

通過 on-change 鈎子函數來對每塊的文件列表進行控制,需要知道當前操作模塊的序號,這就要添加一個index的自定義參數

 templateForms = [
            {templateId:'',templateContent:'',fileList:[]}
];
   <template v-for="(item,index) in templateForms">
                            <el-form-item label="選擇短信模板:" prop="template">
                                <el-select v-model="item.templateId ">
                                    <el-option
                                            v-for="tem in templates"
                                            :key="tem.value"
                                            :label="tem.text"
                                            :value="tem.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="短信預覽:">
                                <el-input type="textarea"
                                          v-model="item.templateContent"
                                          :rows="5"
                                          readonly></el-input>
                            </el-form-item>
                            <el-form-item label="接受號碼上傳:">
                                <el-upload
                                        action=""
                                        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                        :auto-upload="false"
                                        :file-list="item.fileList"
                                        :on-change="(file, fileList) => {handleChange(file, fileList, index)}"
                                >
                                    <el-button size="small" type="primary">點擊上傳</el-button>
                                </el-upload>
                            </el-form-item>
                        </template>
handleChange(file:any,fileList:any[],index:number){
            console.log(file,fileList,index);
            this.templateForms[index].fileList = fileList;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM