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

Posted 2020-12-18 j-luck

　　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);

　　}