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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！