项目中有一个功能,要支持同时创建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; }