element-ui下的el-upload里的on-preview组件带参立即触发问题

原创已于 2023-06-07 15:01:21 修改 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui #html

于 2023-06-07 14:55:44 首次发布

element ui 专栏收录该内容

1 篇文章

订阅专栏

文章描述了在使用Vue.js的el-upload组件时遇到的方法自动触发问题，详细分析了问题的现象——on-preview事件在页面加载时错误地执行，并提出了两种解决方法：1)移除事件处理函数的参数；2)使用闭包函数传递参数。作者分享了这个问题及其解决方案，以供他人参考。

官网上的推荐写法是这样的

但是现在这种属性后面接的一般都是方法的形式，因此一开始我选择了下面的写法

            <el-upload
              :disabled="form.flowNodeId !== disStr || isUpdate == 'view'"
              action=""
              :http-request="httpRequest"
              :multiple="true"
              :file-list="verificaFiles"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :on-preview="goDownload(file)"
            >

methods:{  
  //下载查看文件
  goDownload(data){
    debugger
  },
}

随后发现一进入该页面后就立即进入断点触发该方法，并且后续如何点击该方法都不再触发

同时写在dom里的:on-preview="goDownload(file)"这里面的goDownload只要有括号，无论是否带参，参数是什么，都会触发上述bug

通过各种尝试，发现有两种解决方法

1.去掉:on-preview="goDownload(file)"里(file)，就像这样

            <el-upload
              :disabled="form.flowNodeId !== disStr || isUpdate == 'view'"
              action=""
              :http-request="httpRequest"
              :multiple="true"
              :file-list="verificaFiles"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :on-preview="goDownload"
            >

2.:on-preview="goDownload(file)里的参数替换为item，在methods的对应方法中写一个闭包函数

            <el-upload
              :disabled="form.flowNodeId !== disStr || isUpdate == 'view'"
              action=""
              :http-request="httpRequest"
              :multiple="true"
              :file-list="verificaFiles"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :on-preview="goDownload(item)"
            >

methods:{  
  //下载查看文件
  goDownload(data){
    return () => {
      //具体功能实现的代码写在这里
      console.log(`预览文件 ${data.name}`);
    };
  },
}

以上就是我遇到的问题以及解决办法，记录分享一下~