table列表自动滚动加载，当鼠标移入时列表停止滚动，移出鼠标列表恢复滚动；具体效果如下:
因为做的是大屏对外观有要求，所以PS加一个背景
具体实现代码：
<div class="listDiv">
<div class="tableDiv" @mouseenter="stopScroll" @mouseleave="autoScroll">
<div class="tHeaderContainer">
<table class="tHeader">
<thead>
<tr ref="tr">
<th>工站/模组</th>
<th>负责人</th>
<th>状态</th>
<th>备注</th>
</tr>
</thead>
</table>
</div>
<div class="scrollContainer">
<!-- 用ref绑定后就不需要再获取dom节点了，直接绑定table和tBody，然后$refs里面调用就行。
在javascript里面调用：this.$refs.table 这样就可以减少获取dom节点的消耗了 -->
<table class="tTableName" ref="table">
<tbody ref="tBody">
<tr v-for="(item, index) in tableData" :key="index">
<td>{{item.stationName}}</td>
<td>{{item.functionary}}</td>
<td>{{item.task}}</td>
<td><i class="el-icon-more"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
let scrollTimer;
export default {
name: "",
components: {},
data() {
return {
tableData: [
"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13",
].reduce((pre, cur, currentIndex) => {
let data = {};
data.stationName = "工站" + cur;
data.functionary = cur + "号工人";
switch (cur) {
case "1":
case "5":
data.task = "未开始";
break;
case "2":
case "6":
data.task = "完成";
break;
case "3":
case "8":
data.task = "进行中";
break;
case "4":
case "10":
data.task = "完成";
break;
case "7":
data.task = "进行中";
break;
default:
data.task = "完成";
break;
}
pre.push(data);
console.log('99999999999900',data,pre,8888);
return pre;
}, []),
};
},
mounted() {
this.autoScroll();
},
methods: {
autoScroll() {
const table = this.$refs.table;
const tBody = this.$refs.tBody;
//保留这个子节点在原先位置的显示,先用Node.cloneNode方法复制出一个节点的副本,然后再插入到新位置
//用法：var dupNode = node.cloneNode(deep);node表示将要被克隆的节点，dupNode克隆生成的副本节点
//deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
table.appendChild(tBody.cloneNode(true));
//元素的height为在tr中设置的height: 1.8rem，所以offsetHeight始终为 1.8rem
//(offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。)
let speed = table.getElementsByTagName("td")[0].offsetHeight;
function scroll() {
let top = table.offsetTop;
//offsetTop：DOM对象的上边距离定位父级（最近有定位属性的父级）的上边的距离，也就是table与scrollContainer的距离，初始值为0
//tBody的offsetHeight是固定值，top表示超出tbody的部分为负数，0.5s循环一次，不断减去speed
if (top <= speed - tBody.offsetHeight) {
table.style.transition = "0s";
table.style.top = 0;
} else {
table.style.transition = "ease 1.5s";
table.style.top = top - speed + "px";
}
}
scrollTimer = setInterval(scroll, 500);
},
stopScroll() {
clearInterval(scrollTimer);
},
},
computed: {},
};
</script>
<style scoped>
.listDiv {
width: 100%;
height: 96%;
display: flex;
justify-content: center;
align-items: center;
margin: 1%;
position: relative;
background: url("../img/tbg1.png") no-repeat 50% 50%;
}
.tableDiv {
z-index: 100;
width: 90%;
height: 90%;
pointer-events: auto;
padding: 0 1%;
box-shadow: 0 0 1rem #b8b7b780 inset;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.tableDiv::before,
.tableDiv::after {
content: "";
pointer-events: none;
position: absolute;
width: 1.5rem;
height: 1.5rem;
transition: 0.3s ease-in-out;
}
.tableDiv::before {
top: -0.1rem;
left: -0.1rem;
border-top: 0.15rem solid #769ce2;
border-left: 0.15rem solid #769ce2;
}
.tableDiv::after {
right: -0.1rem;
bottom: -0.1rem;
border-bottom: 0.15rem solid #769ce2;
border-right: 0.15rem solid #769ce2;
}
.tableDiv:hover::before {
width: 100%;
height: 100%;
border-top: 0.15rem solid #769ce2;
border-left: 0.15rem solid #769ce2;
animation: glow_before 1s ease-out infinite alternate;
}
.tableDiv:hover::after {
width: 100%;
height: 100%;
border-bottom: 0.15rem solid #769ce2;
border-right: 0.15rem solid #769ce2;
animation: glow_after 1s ease-out infinite alternate;
}
.tHeaderContainer {
position: relative;
height: 2.7rem;
width: 100%;
overflow: hidden;
}
.scrollContainer {
position: relative;
height: calc(100% - 2.7rem);
min-height: 900px;
width: 100%;
overflow: hidden;
}
.tHeader,
.tTableName {
position: absolute;
width: 100%;
height: 100%;
/* border-collapse属性是运用在table标签里的， collapse值会让 边框合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 */
border-collapse: collapse;
}
tr {
height: 2rem;
font-size: 0.8rem;
text-align: center;
border-bottom: 1px dashed rgb(107, 101, 119);
}
th {
font-size: 0.95rem;
height: 2.5rem;
width: 30%;
text-align: center;
}
td {
width: 30%;
height: 100%;
text-align: center;
}
@font-face {
font-family: "sysFont";
src: url("/static/font/时尚中黑简体.ttf");
}
@keyframes glow_before {
0% {
box-shadow: -0.1rem -0.1rem 0.2rem #408acf50;
}
100% {
box-shadow: -0.5rem -0.5rem 1rem #769ce2;
}
}
@keyframes glow_after {
0% {
box-shadow: 0.1rem 0.1rem 0.2rem #408acf50;
}
100% {
box-shadow: 0.5rem 0.5rem 1rem #769ce2;
}
}
</style>
