vue中的带参数的方法如何传递其他参数

在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)
    }
},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值