当前位置: 首页 > 工具软件 > v-button > 使用案例 >

el-upload组件中使用el-button都会触发上传事件的问题

秦城
2023-12-01

 <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>
 类似资料: