有代码如下:
<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-collapse
的change
事件冒泡,以阻止el-checkbox-group
的点击事件:
el-collapse
组件绑定一个自定义事件处理函数,用以替代默认的change
事件处理函数。例如,将原来的@change="checkboxChange"
改为@my-change="checkboxChange"
。<el-collapse @my-change="checkboxChange">
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
事件。这就实现了阻止点击事件冒泡的功能。
希望这个解决方案对你有帮助。如果你有任何疑问或需要进一步的代码示例,请随时提问。
【相关推荐】