【Vue】elementUI里CheckBox组件的change回调如何在使用自定义传参的条件下保留默认传参？

我想在勾选的时候，传递该行数据item，同时根据CheckBox更新后value的值向数组selectedId中插入item中的uid。
官方文档里面只有一个默认的回调参数，我想在这基础上再多传递一个参数，有什么办法么？

【Vue】elementUI里CheckBox组件的change回调如何在使用自定义传参的条件下保留默认传参？

下面是我的代码...

<div id="app">
<div v-for="item in stylesData">
<el-checkbox v-model="item.checked" @change="selecteChange(item)"></el-checkbox>
<img v-bind:src="https://segmentfault.com/q/1010000014583061/item.src"/>
<p>{{item.text}}</p>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: function(){
return {
selectedId: [],        //选中后的UID数组
stylesData: [{
uid: 1,
checked: false,
src: 'xxx.jpg',
text: '一段描述'
},{
uid: 2,
checked: false,
src: 'xxxx.jpg',
text: '二段描述'
},{
uid: 3,
checked: false,
src: 'xxxxx.jpg',
text: '三段描述'
}]
}
},
methods: {
selecteChange: function(item,value){
console.log(item);
console.log(value);
if(value == true){
app.selectedId.push(item.uid);
}
}
}
});
</script>

回答

同问，有什么办法保留默认传参

找到解决办法了。

@change="checked=>方法名(checked,你想传的额外参数...)"

实例

<el-checkbox :disabled="scope.row.disable" v-model="scope.row.cashStatus"
                       @change="checked=>checkRow(checked, scope.row)"></el-checkbox>
checkRow(checked,row) {
    console.log(`checked:${checked}`)
    console.log(`row:${JSON.stringify(row)}`)
  },

控制台结果：

checked:true
row:{"name":"FB 周日","disable":false,"cashStatus":true,"netStatus":false}
@change="selecteChange(a,b,c,d...)"
selecteChange(a,b,c,d...){
    //...
}

这种形式是自定义传参，还有一种是默认传参

@change="selecteChange"
selecteChange(val,e){
    //...
}

你用自定义传参就可以了，传入一个item参数不就够了吗？value根据item.checked可以获取到。

这里可以帮助你https://blog.csdn.net/qq_37581708/article/details/103088621

以上是 【Vue】elementUI里CheckBox组件的change回调如何在使用自定义传参的条件下保留默认传参？ 的全部内容， 来源链接： utcz.com/a/72191.html

回到顶部