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

Question

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

Answer 1

这样写