关于el-popover在表格中既打不开也关不上的问题

el-popover很好用，但是它确有很大的问题

一、最普通的运用

<el-popover placement="top" width="270" v-model="popoverFlag"><p class="pb-4 flex leading-22"><i class="el-icon-error text-red mr-2 mt-1"></i><span><span>确认删除吗？删除后，数据无法恢复</span></span></p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="popoverFlag = false">取消</el-button><el-button type="danger" size="mini" @click="delData">删除</el-button></div><el-button type="danger" plain slot="reference">删除</el-button>
</el-popover>

必需的内容：

1.el-popover中添加属性 v-model（Boolean）

2.在绑定的内容上添加 slot="reference"

二、在表格中的运用

在表格中常用于操作列

<!-- 操作 -->
<template slot-scope="scope" slot="operation"><el-popover popper-class="tablePop" placement="top" width="270" :ref="'pop' + scope.$index" class="mx-4"><p class="pb-4 flex leading-22"><i class="el-icon-error text-red mr-2 mt-1"></i><span><span>确认删除吗？删除后，数据不可恢复</span></span></p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="closeTablePopover('pop' + scope.$index)">取消</el-button><el-button type="danger" size="mini" @click="delItemData(scope.row)">删除</el-button></div><el-button type="text" slot="reference">删除</el-button></el-popover>
</template>

1.在表格中要保持每条popover的绑定数据是唯一的，因此绑定:ref="'pop' + scope.$index"，声明唯一

2.在绑定的内容上添加 slot="reference"

一般来说，这样把数据声明唯一了，el-popover就能在表格中显示出来了

三、el-popover的隐藏

在el-popover显示出来以后，常规的调用关闭方法也失效了

// 失效（能找到该元素，不报错，就是调用不起来）
this.$refs.['pop' + scope.$index].doClose()

至于为什么失效我也无法进行判断了，但是其他的方法千千万，总有一款适合我

因此，我进行页面点击的模拟，可以实现同样的效果

// 关闭表格的删除弹窗
closeTablePopover() {document.body.click()
},

至此，el-popover可以在表格中显示和隐藏了

但是doClose()隐藏的问题我还是想了解一下，至于为什么会失效，还请大佬帮我解答一下

关于el-popover在表格中既打不开也关不上的问题相关推荐

el+vue实战 ② 在el-table中的每一行加上头像/图片；去掉div标签自动换行问题；el-table表格中实现字数限制，只显示一行
处理之前: 处理之后: 1.在el-table中的每一行加上头像/图片 <el-table-column prop="customerName" label="姓名 ...
html选中然后显示到表格,如何将数据从html表单显示到表格中？
听起来好像你并没有使用服务器端发布,但你只是试图将信息放在一个表单上,并显示在同一页上的表格中.我对吗? 如果是的话,这是函数的例子,你可以使用: 的JavaScript: function addR ...
将json数据集合表格显示及表格中增加按钮
将json数据集合表格显示本文讲述的是将后台获取到的json数据集合用表格的方式呈现到前端第一次的时候,根据网上的教程,使用了js方法,对json集合进行遍历后输出,发现其较为复杂,且输出的时候因 ...
Element—UI 表格中换页后序号不变的问题
问题情况:在表格中做出了分页功能后发现分页后的序号还是从1开始解决方法: <el-table-columnlabel="序号"type="index"w ...
elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...
layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的 ...
怎样在表格中选出同一类_3分钟教会你如何将不同表格中的数据关联在一起
原标题: 3分钟教会你如何将不同表格中的数据关联在一起版权声明:本文为博主原创文章,未经博主允许不得转载. 智能输入超级表格微视频关键词: 智能输入关联不同表格逻辑输入「超级表格微视频」 ...
qt 多个模型如何显示在表格中_Qt MOOC系列教程第五章第四节：QML中的C++模型
我们已经多次讨论过如何创建自己的模型来表示QML中的数据,并且在上一节中我们看到了QStandardItemModel的基本示例.通常,出于性能和功能方面的原因,需要从一开始就要实现自己的模型.QAb ...
stackoverflow_StackOverflow帐户如何确保您在公认的开发人员表格中占有一席之地
stackoverflow by Melchor Tatlonghari 由Melchor Tatlonghari StackOverflow帐户如何确保您在公认的开发人员表格中占有一席之地 (How ...

关于el-popover在表格中既打不开也关不上的问题

关于el-popover在表格中既打不开也关不上的问题相关推荐

最新文章

热门文章