在Element UI的<el-table>组件中,点击子元素不触发父级事件

在Element UI的组件中,@row-click事件是绑定在整行上的,这意味着如果点击了表格的任意位置(除非有特定的子元素阻止了事件冒泡),都会触发这个事件。如果你想要在某些子元素上点击时不触发@row-click事件,你需要在这些子元素上阻止事件冒泡。

你可以通过在子元素上添加点击事件并调用event.stopPropagation()方法来实现这一点。event.stopPropagation()会阻止事件进一步冒泡到DOM树中,因此不会触发绑定在更高层次元素(如整行)上的事件。

以下是一个示例,展示了如何在表格的某个子元素(比如一个按钮)上点击时阻止@row-click事件的触发:

  
  

在这个例子中,使用了#default插槽来自定义name列的渲染。在这个插槽内部,添加了一个文本来显示名字,并添加了一个按钮。按钮上绑定了点击事件@click.stop="handleClickButton(row)",其中.stop修饰符用于阻止事件冒泡。这样,当按钮被点击时,只会触发handleClickButton方法,而不会触发绑定在整行上的handleRowClick方法。

你可能感兴趣的:(vue.js,javascript,ecmascript)