官网上的推荐写法是这样的
但是现在这种属性后面接的一般都是方法的形式,因此一开始我选择了下面的写法
<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}`);
};
},
}
以上就是我遇到的问题以及解决办法,记录分享一下~