Element-UI表格嵌入popover遇到的问题及解决方案
最近几天遇到一个比较棘手的问题，需求是在触发表格某一列的cell，弹窗展示新的数据（不是表格内的数据，而是需要重新向后端请求）
我这里使用了popover展示弹窗
代码是删减过的，为了更清楚地记录，有些这里没有用到的代码就删了
<el-table :data="tableData" @cell-mouse-enter="cellEnter">
<el-table-column
prop="one"
label="第一列"
align="center">
<template scope="scope">
<el-popover
id="popover1"
trigger="hover"
placement="right"
:visible-arrow="false"
:slot= popoverData
:ref= "`popover1` + scope.$index"
:popper-class= "{'pop-con' : vis !== true}">
<div v-if="vis === true" class="tips-con">
<p>事件1：{{popoverData.satisfied}}件</p>
<p>事件1：{{popoverData.general}}件</p>
<p>事件3：{{popoverData.basically}}件</p>
<p>事件4：{{popoverData.dissatisfied}}件</p>
</div>
<div class="name-wrapper" slot="reference"
@mouseenter="openAction(scope.$index)"
@mouseleave="cancelAction(scope.$index)">
{{ scope.row.one }}
</div>
</el-popover>
</template>
</el-table-column>
</el-table>1. 触发方式是hover（写在popover的trigger中），因为要从后端获取数据，所以在table加入鼠标移入事件（@cell-mouse-enter）。
cellEnter(row, column){
if(column.label === "第一行"){
this.popoverData = [];
this.vis = false;
this.$axios({
method: "post",
url: "XXXX/getPopoverData.action",
data: {
one: row.one
}
}).then((res) => {
this.popoverData = res.data.content.result.data;
this.vis = true;
})
}
},2. 获取的数据存储在全局变量popoverData中，用:slot给弹窗内容赋值。
3. 表格的内容要展示在popover组件的外部div中，此时，要在这个外部div的标签内写"slot='reference'"。
4. 由于是在表格内，每一个cell都共用一个popover，鼠标快速滑入几个cell时，会出现多个popover同时出现的情况，非常影响用户体验，因此，给popover加入唯一标识，用:ref来绑定scope.$index来实现。
5. 此时出现了一个问题，鼠标初次滑入第一个cell显示正常，滑入下一行cell时会出现popover先为空闪烁一下，然后才显示数据。因此，在显示表格内容的外部div设置了鼠标移入移出时的事件@mouseenter和@moueleave，用$refs在鼠标移入时执行doShow()方法，移出时执行doClose方法。
cancelAction(index){
let refName = "popover1" + index;
this.$refs[refName].doClose();
},
openAction(index){
let refName = "popover1" + index;
this.$refs[refName].doShow();
},6. 第5个问题还存在，在显示弹窗的div中加入v-if语句控制，写入全局变量vis，初始值为false，当数据为空时，vis为false不显示，数据传入时vis设为true，显示，控制语句在第二个代码块的cellEnter方法中。
7.熬到现在已经过了两天，popover显示仍然有问题，弹窗的div在popover上面，popover有自己的样式，因此用自定义样式:popper-class修改样式，并且用全局变量vis控制显示的时机，这里这样写会出现一个警告type check failed for prop "popperClass". Expected String, got Object 现在未解决，再加上修改了el-popover的样式才能正常显示，试着删除pop-con样式，但是删了之后就会出现弹窗闪烁的问题。
.tips-con {
background-color: #000000;
font-size: 14px;
border: 0px;
opacity: 0.8;
color: #ffffff;
}
.pop-con{
display: none;
background-color: #000000;
}
.el-popover {
background-color: #000000;
border: 0px;
}8.最后一个问题，popover自带的小三角箭头没有改变其样式，而且也挺影响美观的，查了一下element-ui文档，直接用visible-arrow就可以去掉。但是不可以直接赋值，要在前面加冒号绑定一个false值。关于冒号：vue中的冒号是v-bind的缩写，加冒号的说明后面是一个变量或表达式，没加冒号的说明后面就是一个字符串字面量。
到这里需求就完成了！
总结：第一次接触popover，还是有挺多东西的，需要系统学习一下vue，细节上的小问题其实不需要花太多时间来解决。
到此这篇关于Element-UI表格嵌入popover遇到的问题及解决方案的文章就介绍到这了,更多相关Element-UI表格嵌入popover内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
文章详细分析了Vue项目中静态资源路径失效的问题,包括开发、构建、部署等阶段的常见原因,并提供了多种解决方案,旨在帮助开发者系统性地解决静态资源路径问题,构建稳定可靠的前端应用,需要的朋友可以参考下2025-03-03
本文主要介绍了Element el-upload上传组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了vue父子组件动态传值的几种方式及注意问题详解,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue导入.md文件的步骤（markdown转HTML），帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
使用Element时默认勾选表格toggleRowSelection方式
这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
记录一下自己最近开发vue3.0的小小问题,下面这篇文章主要给大家介绍了关于vue3输入框生成的时候如何自动获取焦点的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了在vue中v-for循环遍历图片不显示错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue在组件中使用v-model的场景，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论