<template>
<el-table
:data="cameraList"
class="zq-table-theme-info"
ref="scrollTableOne"
:header-cell-style="{ background: '#0B2545', color: 'white' }"
:cell-style="{ background: '#0B2545', color: 'white' }"
style="height: 350px; background-color: rgb(11, 37, 69)"
>
<el-table-column
prop="date"
label="日期"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
align="center"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</template>
let cameraList = ref([]);
const tableNode = ref(null);
let scrollTableOne = ref("");
const scrollTable = () => {
if (cameraList.value) {
tableNode.value =
scrollTableOne.value.$refs.bodyWrapper.getElementsByClassName(
"el-scrollbar__wrap"
)[0];
const tableScroll = ref(true);
tableNode.value.addEventListener("mouseover", () => {
tableScroll.value = false;
});
tableNode.value.addEventListener("mouseout", () => {
tableScroll.value = true;
});
setInterval(() => {
if (tableScroll.value) {
tableNode.value.scrollTop++;
if (
tableNode.value.clientHeight + tableNode.value.scrollTop ===
tableNode.value.scrollHeight
) {
tableNode.value.scrollTop = 0;
}
}
}, 30);
}
};