前言：在使用大屏组件库data-v开发大屏驾驶舱系统，dv-scroll-board实现表格数据滚动的效果，但是某一列数据较多，需求提出：鼠标移上去要显示对应的问题，完全展示出来。奈何以前没有搞过这个问题，随即立马找向百度麻麻！实现效果及方法如下：
<template><div @mousemove="move" @mouseleave="leave" style="position: relative"><dv-scroll-boardstyle="width: 100%; height: 230px; padding: 0 10px":config="config"@mouseover="over"/><pv-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组件库可以再频繁运用下😁