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

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

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

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

复制代码
<template>  
  <div class="content">  
    <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">  
      <el-table-column prop="date" label="Date" width="180" />  
      <el-table-column prop="name" label="Name" width="180">  
        <template #default="{ row }">  
          <span>{{ row.name }}</span>  
          <el-button type="text" @click.stop="handleClickButton(row)">不触发行点击</el-button>  
        </template>  
      </el-table-column>  
      <el-table-column prop="address" label="Address" />  
    </el-table>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const tableData = ref([  
      // ... 表格数据  
    ]);  
  
    // 处理行点击事件的方法  
    const handleRowClick = (row, column, event) => {  
      console.log('行被点击了', row.id);  
    };  
  
    // 处理按钮点击事件的方法  
    const handleClickButton = (row) => {  
      console.log('按钮被点击了,但行点击事件没有触发', row.id);  
    };  
  
    return {  
      tableData,  
      handleRowClick,  
      handleClickButton,  
    };  
  },  
};  
</script>

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

相关推荐
前端君7 小时前
实现最大异步并发执行队列
javascript
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy10 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端10 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿10 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL10 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉10 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~10 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js