項目中有一個功能,要支持同時創建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; }