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

      }

  • 相关阅读:
    地理学考 要结合地图记忆的知识点
    物理选修3-1学习笔记
    UOJ#506. 【JOISC2020】遗迹 动态规划
    UOJ#39. 【清华集训2014】简单回路 动态规划 插头DP
    UOJ#339. 【清华集训2017】小 Y 和二叉树 贪心
    Codeforces 1239E. Turtle 折半
    概率论学习笔记
    UOJ#469. 【ZJOI2019】开关 生成函数
    被鄙视
    UOJ#468. 【ZJOI2019】Minimax搜索 动态DP
  • 原文地址:https://www.cnblogs.com/J-Luck/p/13357118.html
Copyright © 2011-2022 走看看