element中阻止上传文件弹框出现后如何恢复

需求:

element中阻止上传文件弹框出现,显示自己定义的弹框出现,然后点击自定义弹框中的确认按钮,在重新打开上传文件弹框
   <el-upload ref="upload" class="upload-btn" action="/pms/pms/element-tables/upload"
                   :before-upload="beforeUpload"
                   accept=".xls,.xlsx"
                   :show-file-list="false"
                   :http-request='beforeAvatarUpload'
                   v-show="!isUpload">    // 将上传组件中内置的button按钮先提前隐藏掉
          <el-button ref="upload" class="back-to price-btn">{{ $t('uploadFile') }}</el-button>  
    </el-upload>


          <el-button v-show="isUpload"  @click="uploadBtn" class="back-to price-btn">{{ $t('uploadFile') }}</el-button>  // 在外层写一个button按钮,点击此按钮触发自定义展示弹框出现


   <!--upload自定义展示弹框-->
    <el-dialog title="Please confirm if you want to upload the sellable indicator for the selected sales entities" :visible.sync="uploadShow" width="40%">
      <ul style="font: normal normal normal 14px Lato;color: #000">
        <li v-for="item in queryForm.salesEntities" :key="item"> {{ item }}</li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadShow = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="uploadSure">{{ $t('confirm') }}</el-button>
      </span>
    </el-dialog>

    data() {
      isUpload: true,
    },


     methods: {
        //打开自定义的弹框
         uploadBtn(){
              this.uploadShow = true;
        },


        // 点击自定义弹框中的确认按钮,关闭自定义弹框,并恢复上传组件的默认的文件弹框
         uploadSure(){
          this.uploadShow = false;
          this.$refs['upload'].$refs['upload-inner'].handleClick()   // 注意:ref必须和上面上传组件定义的ref一致
        }, 


    }



posted @ 2021-11-15 14:45  爱划水的小刚哥  阅读(491)  评论(0编辑  收藏  举报