H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

<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的原因。

回答

image.png
这样写

未经允许不得转载:H5W3 » elementUI 组件内套用组件导致的事件冒泡

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址