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

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

 

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

            <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}`);
    };
  },
}

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