element中 popconfirm与tooltip一起使用

最新推荐文章于 2025-06-09 14:06:27 发布

原创最新推荐文章于 2025-06-09 14:06:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Vue 专栏收录该内容

24 篇文章

订阅专栏

在Vue中，当el-popconfirm和el-tooltip组合使用出现失效问题时，可以通过添加reference属性并用div包裹el-tooltip来解决。具体方法是在el-popconfirm的template#reference中插入一个div，然后在div内部使用el-tooltip，确保el-tooltip的正确显示和功能执行。

一、el-popconfirm与el-tooltip一起使用

el-popconfirm与el-tooltip一起使用时失效解决办法：
添加关键的reference,并且用div再包裹一层

<el-popconfirm title="确定删除吗？" @confirm="deleteFun(item)">
	<template #reference>
		<div>
			<el-tooltip effect="dark" content="删除" placement="bottom" popper-class="tool-tip">
				<i class="el-icon-delete delete"></i>
			</el-tooltip>
		</div>
	</template>
</el-popconfirm>