＜el-row＞中，click.stop不生效

<el-row

                            class="widget-col widget-view"

                            v-if="el && el.key"

                            :key="el.key"

                            type="flex"

                            :class="{ active: selectWidget.key == el.key }"

                            :style="el.options.display ? 'opacity: 0.5;' : ''"

                            :gutter="el.options.gutter ? el.options.gutter : 0"

                            :justify="el.options.justify"

                            :align="el.options.align"

                             @click.stop="handleSelectWidget(colIndex, i)"

                          >

</el-row>

示例代码如上，再点击时，click.stop不生效，不执行，直接去执行父组件的函数。献上解决方案:再套一层div，把.stop加在div上。

<div v-else-if="el.type == 'grid'" :key="i" @click.stop="handleSelectWidget(colIndex, i)">

                          {{ element.key }} {{ el.key }} {{ selectWidget.key }}

                          <el-row

                            class="widget-col widget-view"

                            v-if="el && el.key"

                            :key="el.key"

                            type="flex"

                            :class="{ active: selectWidget.key == el.key }"

                            :style="el.options.display ? 'opacity: 0.5;' : ''"

                            :gutter="el.options.gutter ? el.options.gutter : 0"

                            :justify="el.options.justify"

                            :align="el.options.align"

                          >

</el-row>

</div>

 

 原因：

在使用 Vue.js 框架的 Element UI 库中，对于一些组件，如 el-row ，可能不能直接通过在其上添加 @click 来绑定原生的 click 事件，因为这些组件可能没有实现 click 事件的派发。