Element-UI表格嵌入popover出现的问题以及解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了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，细节上的小问题其实不需要花太多时间来解决。文章来源地址https://www.toymoban.com/news/detail-568846.html

到了这里，关于Element-UI表格嵌入popover出现的问题以及解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！