element el-checkbox-group内嵌el-collapse时触发el-collapse的change事件怎么阻止el-checkbox-group点击事件冒泡

有代码如下:

<el-checkbox-group v-model="currentVal.formCheckboxVal" @change="checkboxChange">
                            <draggable v-model="currentVal.formCheckboxVal" chosen-class="chosen" force-fallback="true" animation="500" @end="end">
                                    <transition-group>
                                        <el-checkbox :label="item.value" :disabled="item.code==='form_inquiry'"  v-for="(item) in currentVal.formCheckbox" :key="item.value" >
                                            <el-collapse>
                                                <el-collapse-item>
                                                    <template slot="title">
                                                        <div class="checkbox-icon-lable">
                                                            <span class="mover fn-csm p-r-5" :title="$t('鼠标拖住移动')"><i class="el-icon-sort"></i></span>
                                                            <span :title="item.label">{{item.label}}</span>
                                                        </div>
                                                    </template>
                                                    <div class="collapse-content">
                                                        <span class="another-name">{{$t('别名')}}</span><el-input v-model="item.title" :placeholder="$t('别名')"></el-input>
                                                    </div>
                                                </el-collapse-item>
                                            </el-collapse>

                                        </el-checkbox>
                                    </transition-group>
                            </draggable>
                        </el-checkbox-group>


element el-checkbox-group内嵌el-collapse时触发el-collapse的change事件怎么阻止el-checkbox-group点击事件冒泡,即我点击展开折叠面板时不触发复选框的change事件

【以下回答由 GPT 生成】

针对这个问题,你可以通过以下步骤来阻止el-collapsechange事件冒泡,以阻止el-checkbox-group的点击事件:

  1. el-collapse组件绑定一个自定义事件处理函数,用以替代默认的change事件处理函数。例如,将原来的@change="checkboxChange"改为@my-change="checkboxChange"
<el-collapse @my-change="checkboxChange">
  1. 在自定义事件处理函数中,使用event.stopPropagation()方法来阻止事件冒泡。这样一来,当你点击el-checkbox-group中的任意一个el-checkbox时,只会触发el-checkbox的点击事件,不会触发el-collapse的 change 事件。
methods: {
  checkboxChange(event) {
    event.stopPropagation();
    // 其他处理代码...
  }
}

这样,当你点击el-checkbox-group中的el-checkbox时,只会触发el-checkbox的点击事件,不会触发el-collapsechange事件。这就实现了阻止点击事件冒泡的功能。

希望这个解决方案对你有帮助。如果你有任何疑问或需要进一步的代码示例,请随时提问。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^