zoukankan      html  css  js  c++  java
  • 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);

      }

  • 相关阅读:
    ini_set /ini_get函数功能-----PHP
    【转】那个什么都懂的家伙
    word 2007为不同页插入不同页眉页脚
    August 26th 2017 Week 34th Saturday
    【2017-11-08】Linux与openCV:opencv版本查看及库文件位置等
    August 25th 2017 Week 34th Friday
    August 24th 2017 Week 34th Thursday
    August 23rd 2017 Week 34th Wednesday
    August 22nd 2017 Week 34th Tuesday
    August 21st 2017 Week 34th Monday
  • 原文地址:https://www.cnblogs.com/J-Luck/p/13357118.html
Copyright © 2011-2022 走看看