elementUI 组件内套用组件导致的事件冒泡

• Z时代
• 2024-01-10
• 分类：技术分享

<el-checkbox-group v-model="checkboxData" class="clearfix">
<el-checkbox :label="item.id" v-for="(item, index) in stageList" :key="index">
<span class="label_text">{{ item.name }}</span>
<el-select v-model="selectObj[item.id]" clearable placeholder="请选择">
<el-option :label="v.name" :value="v.id" v-for="(v, i) in item.statusList" :key="'sub' + i"></el-option>
</el-select>
</el-checkbox>
</el-checkbox-group>

在点击下拉框的上下箭头以及清除图标时，会触发当前行checkbox的选中

<el-select v-model="selectObj[item.id]" clearable placeholder="请选择" @click.native="(e) => {
e.preventDefault()
}">
<el-option :label="v.name" :value="v.id" v-for="(v, i) in item.statusList" :key="'sub' + i"></el-option>
</el-select>

在el-select上绑定上方点击事件后，解决了上下箭头冒泡触发checkbox选中的问题，但是清除图标的点击事件问题依旧，不知道是不是清除图标一开始并不在dom中，在鼠标移入后才插入dom的原因。

回答

这样写

以上是 elementUI 组件内套用组件导致的事件冒泡 的全部内容， 来源链接： utcz.com/a/42467.html