zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    入门学习
    SQL语句
    Jmeter录制badboy
    post方式提交数据
    get向服务器提交数据
    手机端解析json
    生成JSON字符串
    新闻客户端
    从网络下载的图片加缓存功能
    消息队列机制messageQuene
  • 原文地址:https://www.cnblogs.com/gxp69/p/13931596.html
Copyright © 2011-2022 走看看