在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)

最新推荐文章于 2025-04-17 14:57:19 发布

不说别的就是很菜

最新推荐文章于 2025-04-17 14:57:19 发布

阅读量1.1w

点赞数 7

分类专栏：报错解决方案 Vue-cli 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_33763827/article/details/118526389

版权

Vue-cli 同时被 2 个专栏收录

37 篇文章

订阅专栏

报错解决方案

8 篇文章

订阅专栏

本文讲述了在使用Element-UI的Popover组件时，遇到click事件冲突导致visible属性不更新的问题，通过绑定表格行的visible属性和使用ref结合DOM操作解决了这个问题。作者提供了两种有效解决方案：移除内联点击事件和利用ref控制popover的显示隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用出现的问题

根据element-ui文档与网上教程编写如下代码

<el-popover
 v-model="row.visible"
 trigger="click"
>
<span slot="reference" @click="row.visible=!row.visible">删除</span>
</el-popover>

常规情况下，row中的visible属性会发生改变，但通过调试发现row属性并未改变，查看源码
在这里插入图片描述

所以<span slot="reference" @click="row.visible=!row.visible">删除</span>中的click事件会出现冲突问题

解决方案

使用表格的行绑定的visible属性
直接去掉<span slot="reference" @click="row.visible=!row.visible">删除</span>该行代码中的click方法，row中的visible属性就能照常改变
直接给popover绑定ref+改变DOM元素上的showPopper属性

<el-popover
   placement="top"
   width="280"
   height="144"
   :ref="`popover-${row.priority}`" //绑定唯一值
>
  <div class="ip-popover-content__btns">
    <el-button @click="cancel(row)">取消</el-button>
    <el-button type="primary">确定</el-button>
  </div>
</el-popover>

cancel(row) {
  this.$refs["popover-" + row.priority].showPopper = false;
},