element-ui upload组件 on-change事件 传自定义参数

2023-03-15 14:17:18
166次阅读
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

登录 后评论。没有帐号? 注册 一个。