在vue开发中我们经常用到控件提供的事件方法,比如el-select的@change方法,比如el-upload的on-success方法,这些方法是有默认回调参数的,这时候如果想自己再传递别的参数,该如何处理呢?
方法很简单,
(defaultParam) => { handleMethod(defauleParam, customerParam) }
handlemethod是调用的方法,比如el-select的@change方法
defauleParam是默认的回调参数,比如change方法的value,这个回调参数如果本身有多个的话,可以根据需求,指定自己需要就可以了
customerParam是自定义参数,可以传自己需要的参数
el-select举例
//控件调用
<el-select v-model="ruleForm.typeId"
placeholder="请选择产品分类"
@change="(val) =>{ onTypeChangeTest(val, 2) }">
<el-option v-for="item in productClassifyOptions"
:key="item.id"
:label="item.typeName"
:value="item.id"/>
</el-select>
//methods中方法实现,val是默认参数,type是自定义参数
onTypeChangeTest(val, type){
window.console.log(val)
window.console.log(type)
},
el-upload举例
//在el-table的el-table-column使用el-upload,需要将scope.row当做参数传递,处理数据
<template slot-scope="scope">
<div style="display: flex">
<span style="color: red">*</span>
<el-upload
class="avatar-uploader"
:action="urlOrder"
:headers="headers"
name="image"
:show-file-list="false"
:on-success="(res) => {
handleAvatarSuccess(res,scope.row)
}"
:before-upload="beforeAvatarUpload">
<img v-if="scope.row.image" :src="scope.row.image" class="iconImg">
<i v-else class="el-icon-plus iconImg-uploader-icon"></i>
</el-upload>
</div>
</template>
//method中的方法,如果上传成功,给数据赋值
handleAvatarSuccess(res,row) {
if (res.code == 0) {
this.$set(row, "image", res.data.url)
}
},