解决 el-table使用 el-popover 点击没反应 bug
这个问题可能是由于el-table
和el-popover
的事件冒泡或者捕获机制导致的。el-popover
内部可能使用了一个隐藏的弹出层,当你在el-table
中点击时,点击事件可能被这个隐藏的弹出层拦截,导致没有触发el-table
的点击事件。
解决方法:
- 使用
el-popover
的trigger
属性,设置为manual
,这样可以手动控制弹出层的显示和隐藏。 - 在
el-table
的点击事件处理函数中,手动显示或隐藏el-popover
。
示例代码:
<template>
<el-table :data="tableData">
<el-table-column label="操作">
<template slot-scope="scope">
<el-popover
ref="popover"
placement="top"
width="200"
v-model="scope.row.popoverVisible"
trigger="manual">
<p>这是一些内容,这是一些内容。</p>
</el-popover>
<el-button size="small" @click="handleClick(scope.row)">点击</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
popoverVisible: false, // 控制弹出层的显示与隐藏
// ...其他数据
}]
};
},
methods: {
handleClick(row) {
row.popoverVisible = !row.popoverVisible; // 切换弹出层的显示状态
}
}
};
</script>
在这个示例中,我们为el-table
的每一行数据添加了一个popoverVisible
属性,用来控制对应行的el-popover
的显示和隐藏。在el-button
的点击事件处理函数handleClick
中,我们改变了row.popoverVisible
的值来控制弹出层的显示和隐藏。通过设置trigger
为manual
,我们可以手动控制弹出层的显示,从而避免了点击事件的冲突。
评论已关闭