dv-scroll-board 鼠标移入单元格显示单元格对应所有数据

效果图:

//template
<div @mousemove="move">
	<div
	  class="table"
	   @mouseleave="leave"
	 >
	 	//列表
	   <dv-scroll-board
	     :config="config"
	     @mouseover="over"
	   >
	   </dv-scroll-board>
	   //悬浮框
	   <p
	     v-if="ifShow"
	     class="dv-text"
	     :style="{ top: dvText.keyY, left: dvText.keyX }" 
	   >
	     {{ dvText.name }}
	   </p>
	 <div
</div>
//script
	//data
	//单元格默认值
	dvText: {
      	name: '',
	    keyY: '',
	    keyX: '',
     },
     //控制单元格 显示/隐藏
    ifShow: false,
    //methods
     // 鼠标移入
    over(v) {
      this.ifShow = true
      //v.ceil拿到单元格数据
      this.dvText.name = v.ceil
      //没有值则直接隐藏悬浮框 不然如果设置padding会有背景
      if (this.dvText.name === undefined) {
        this.ifShow = false
      }
    },
    // 鼠标移动
    move(e) {
    	//将获取的值x轴、y轴的值给悬浮框 用来定位到单元格上.
    	//-1200 -500凭自己感觉调 因为每个表格在页面的位置都不一样
      this.dvText.keyX = e.pageX - 1200 + 'px'
      this.dvText.keyY = e.pageY - 500 + 'px'
    },
    // 鼠标离开 
    leave() {
    	//隐藏单元格
      this.ifShow = false
    },
//css
 .ceil {
  position: relative;
}
.dv-text {
  background: #666;
  padding: 5px;
  font-size: 14px;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
}

原文链接：https://blog.csdn.net/fdksfskldfdslkfs/article/details/126721641