在element-ui中的组件函数钩子一般都是自带参数如:
//上传组件
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
API中解释:on-remove 文件列表移除文件时的钩子 function(file, fileList)
也就是上面的beforeRemove函数自带file, fileList这两参数
beforeRemove(file, fileList){
//就这两参数
}
那么想要带自己的参数呢,,尤其一般在表格中的上传,肯定要携带当前一行的参数(动态参数)时;
我们对before-remove属性修改:
//上传组件
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="(file,fileList)=>{
return beforeRemove(file,fileList,data)
}"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
在before-remove上在return 一个函数,并携带data(自己想要的参数)
这样在函数beforeRemove中就可以拿到data了
beforeRemove(file,fileList,data){
console.log(data)
}
@change添加自定义参数
element-ui的change事件默认参数是一个value值,比如下拉框的change事件默认参数是选中的value值,但是实际项目中我们要传的一般不止这一个参数,如果直接追加两个参数可能获取不到,这时需要把参数中的默认参数名换成$event即可。
//第一个参数是默认的value参数,第二个是我们自己想传入的参数
@change='selectChange($event,scope.row)'
或者使用第二种方法:
@change='(val)=>selectChange(value,scope.row)'