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

前言：在使用大屏组件库data-v开发大屏驾驶舱系统，dv-scroll-board实现表格数据滚动的效果，但是某一列数据较多，需求提出：鼠标移上去要显示对应的问题，完全展示出来。奈何以前没有搞过这个问题，随即立马找向百度麻麻！实现效果及方法如下：

<template>
  <div @mousemove="move" @mouseleave="leave" style="position: relative">
    <dv-scroll-board
      style="width: 100%; height: 230px; padding: 0 10px"
      :config="config"
      @mouseover="over"
    />
    <p
      v-if="ifShow"
      class="dv-text"
      :style="{ top: dvText.keyY, right: dvText.keyX, left: dvText.keyX }"
    >
      {{ dvTextName }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dvText: {
        keyX: "15px",
        keyY: "0px",
      },
      dvTextName: "",
      ifShow: false,
      config: {
        header: ["告警标题", "告警时间", "告警状态"],
        data: [
          [
            "任务异常",
            "2025/3/18 5:16:24",
            "已清除",
          ]
        ],
        rowNum: 5, //表格行数
        headerBGC: "rgba(41, 105, 177,0.3)", //表头
        oddRowBGC: "transparent", //奇数行
        evenRowBGC: "transparent", //偶数行
        hoverPause: false,
        // index: true,
        columnWidth: [153, 153, 153, 153, 153],
        align: ["center", "center", "center", "center", "center"],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
   // 这个地方根据自己的业务自行调整，我是固定就放到最上边显示。
    move() {
      //将获取的值x轴、y轴的值给悬浮框 用来定位到单元格上.
      //-1200 -500凭自己感觉调 因为每个表格在页面的位置都不一样
      // this.dvText.keyX = e.pageX - 1300 + "px";
      // this.dvText.keyY = e.pageY - 550 + "px";
    }, // 鼠标离开
    leave() {
      //隐藏单元格
      this.ifShow = false;
    },
    over(v) {
      if (v.columnIndex == 0) {
        console.log(v, "---");
        this.ifShow = true;
        //v.ceil拿到单元格数据
        this.dvTextName = v.ceil;
        没有值则直接隐藏悬浮框 不然如果设置padding会有背景
        if (!this.dvTextName) {
          this.ifShow = false;
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.dv-text {
  background: #666;
  padding: 5px;
  font-size: 14px;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
}
</style>

总结：

1、针对某个单元格的样式可以单独修改吗？比如想要告警状态那一列的某一行显示红色字体？有想法的可以告知下👍

2、DataV组件库可以再频繁运用下😁