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

Question

有代码如下：

<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事件

Answer 1

【以下回答由 GPT 生成】

针对这个问题，你可以通过以下步骤来阻止el-collapse的change事件冒泡，以阻止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-collapse的change事件。这就实现了阻止点击事件冒泡的功能。

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

【相关推荐】

• 建议你看下这篇博客👉 ：elementui——element复选框el-checkbox如何纵向排列改成横向排列
• 除此之外, 这篇博客: elementUi表格多选指定多选行数中的 使用el-checkbox实现方法 部分也许能够解决你的问题。

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