<el-upload
show-file-list
ref="updataDocx"
class="upload-demo"
:headers="uploadHeaders"
action="https://blog.csdn.net/LiXiu_zhe?spm=1018.2226.3001.5343"
accept=".doc,.docx"
:data="getIdData"
multiple
:file-list="fileList"
:auto-upload="false"
>
<div class="add-btn">
<el-button size="small" type="primary" slot="trigger">选择文件夹</el-button
><span>
<el-button @click="dialogFormVisible = false" v-if="!isDetails">取 消</el-button>
<el-button type="primary" @click="addTable('form')" v-if="!isDetails">确 定</el-button>
<el-button @click="dialogFormVisible = false" v-if="isDetails">退 出</el-button>
</span>
</div>
<div slot="tip" class="el-upload__tip">
<!-- <p>只能上传docx/doc文件</p> -->
</div>
</el-upload>
这是之前写的,会导致点击两个按钮都会触发上传文件的事件
解决方法:在需要触发上传文件功能的按钮上添加 slot=“trigger”
已实测这个方法没有效果
我的解决方法是给点击事件上stop修饰符阻止事件传播即可,同理用其它阻止事件传播冒泡的方法也可以。
<el-upload
show-file-list
ref="updataDocx"
class="upload-demo"
:headers="uploadHeaders"
action="https://blog.csdn.net/LiXiu_zhe?spm=1018.2226.3001.5343"
accept=".doc,.docx"
:data="getIdData"
multiple
:file-list="fileList"
:auto-upload="false"
>
<div class="add-btn">
<el-button size="small" type="primary" slot="trigger">选择文件夹</el-button
><span>
<el-button @click.stop="dialogFormVisible = false" v-if="!isDetails">取 消</el-button>
<el-button type="primary" @click.stop="addTable('form')" v-if="!isDetails">确 定</el-button>
<el-button @click.stop="dialogFormVisible = false" v-if="isDetails">退 出</el-button>
</span>
</div>
<div slot="tip" class="el-upload__tip">
<!-- <p>只能上传docx/doc文件</p> -->
</div>
</el-upload>