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实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
这篇文章主要介绍了vue+element项目中过滤输入框特殊字符小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue实现form表单与table表格的数据关联功能,涉及vue.js表单事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue使用cesium创建数据白模方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了VUE接入腾讯验证码功能（滑块验证）备忘,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
Vue实现视频播放vue-video-player、dplayer方式
这篇文章主要介绍了Vue实现视频播放vue-video-player、dplayer方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue-cli4.0多环境配置变量与模式详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
最新评论