一、背景描述

项目中遇到一个奇怪的问题,我使用了 el-popconfirm 组件,项目基于VUE,el-popconfirm 包裹住的按钮,操作列有好几个按钮选项,点击其中任何一处按钮之后,再次打开另外的一个 el-popconfirm 包裹住的按钮点击没有任何的反应,刷新浏览器之后才能点击触发相应的事件。当我把 v-if 删除之后,所有按钮都可以正常操作。加上 v-if 来进行显示控制,就需要刷浏览器之后才能触发相应的事件。

如果下图所示:

在这里插入图片描述

二、原因分析

因为我在按钮中使用了 v-if 来进行显示控制,当我在 el-popconfirm 组件上直接使用 v-if=“” 的时候,就会出现这个问题,问题出现在 v-if 与 el-popconfirm 结合。

三、解决方案

3.1 方案一:使用@onConfirm

<el-popconfirm
	title="是否忽略此次警告?"
	@onConfirm="test(scope.row)"
	v-if="row.status === 0"
	>
</el-popconfirm>

注意,此方案不是适合所有情况。有人可能还是不起作用。请继续往下看

3.2 方案二:@confirm与@onConfirm同时使用

单独使用 @confirm 或者 @onConfirm 都没有效果,折中方式如下:

<el-popconfirm
	title="是否忽略此次警告?"
	@confirm="test(scope.row)"
	@onConfirm="test(scope.row)"
	v-if="row.status === 0"
	>
</el-popconfirm>

注意,此方案不是适合所有情况。有人可能还是不起作用。

3.3 方案三:el-popconfirm 标签外包裹一层标签

比如在在 el-popconfirm 标签外 加一层 span 标签,然后把 v-if 语句写在 span 标签上

<span v-if="row.status === 0">
	<el-popconfirm
		title="是否忽略此次警告?"
		@confirm="test(scope.row)"
		@onConfirm="test(scope.row)"
		>
	</el-popconfirm>
</span>

终极解决方案,这个可能适合多数人,不过最后的样式需要微调一下。

本文完结!

Logo

前往低代码交流专区

更多推荐