table表格中鼠标划过激活Popover弹出框

  el-table(:data="tableData", :stripe="true", border)
            el-table-column(prop="id", label="活动ID", width="85")
            el-table-column(prop="activityName", label="活动名称", width="200")
                template(slot-scope="scope")
                    el-popover(trigger="hover", class="popover", placement="top" )
                        div(class="popcenter", v-loading="ispopover")
                            h4 活动详情
                            p 活动名称: 
                                span {{ }}
                            p 活动时间: 
                                span {{ }}  至
                                span {{ }}
                            p 活动状态: 
                                span {{ }}
                        div(slot="reference", @mouseenter="enter(scope.row)") {{ scope.row.activityName }}

 

 注: slot="reference"    

   @mouseenter="enter()" 鼠标划过触发

   @mouseleave="leave()"鼠标离开触发
 
  
  enter(id) {
            //this.hoverDisplay = [];
            this.ispopover = true;
            // 防抖
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(async () => {
                console.log(“”);
            }, 1000);

  }

posted @ 2020-07-21 20:04  白白了个白白  阅读(616)  评论(0编辑  收藏  举报