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

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

clipboard.png

下面是我的代码…

<div id="app">
    <div v-for="item in stylesData">
        <el-checkbox v-model="item.checked" @change="selecteChange(item)"></el-checkbox>
        <img v-bind:src="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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注