element-ui upload组件 on-change事件 传自定义参数
2023-03-15 14:17:18
91次阅读
0个评论
项目中有一个功能,要支持同时创建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;
}
00