在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
方法。