更新

src/components/aboutTable/DarkTable.vue

@@ -287,27 +287,56 @@ const rowcontextmenuHland = (row, column, e) => {
 };
 
 const timer = ref(null);
+const isCloned = ref(false);
+const originalBodyHeight = ref(0);
 // 鼠标进入
 const clearnScroll = () => {
   clearInterval(timer.value);
   timer.value = null;
 };
+
+watch(() => props.tableData, () => {
+  nextTick(() => {
+    if (props.isScroll) createScroll();
+  })
+},{deep:true});
+
 // 鼠标离开
 const createScroll = () => {
   clearnScroll();
-  // 拿到table
-  const tabel = multipleTableRef.value.layout.table.refs;
-  // 拿到可以滚动的元素
-  const tableWrapper = tabel.bodyWrapper.firstElementChild.firstElementChild;
-  if (props.isScroll) {
-    timer.value = setInterval(() => {
-      tableWrapper.scrollTop += 1;
-      //判断滚动到底部,设置为0(可视高度+距离顶部 = 整个高度)
-      if ( tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
-        tableWrapper.scrollTop = 0;
+  nextTick(() => {
+    const refsPath = multipleTableRef.value?.$refs || multipleTableRef.value?.layout?.table?.refs;
+    const scrollEl = refsPath?.bodyWrapper || multipleTableRef.value?.$el?.querySelector('.el-table__body-wrapper');
+    const tableEl = scrollEl?.querySelector('table') || multipleTableRef.value?.$el?.querySelector('.el-table__body-wrapper table');
+    const bodyEl = tableEl?.tBodies?.[0];
+    if (!props.isScroll || !scrollEl || !tableEl || !bodyEl) return;
+    if (!props.tableHeight) {
+      const fixedH = scrollEl.clientHeight || multipleTableRef.value?.$el?.clientHeight || 0;
+      if (fixedH > 0) {
+        scrollEl.style.height = fixedH + 'px';
+        scrollEl.style.overflowY = 'auto';
       }
-    }, 100);
-  }
+    }
+    originalBodyHeight.value = bodyEl.offsetHeight;
+    const oldClone = tableEl.querySelector('tbody[data-clone="true"]');
+    if (oldClone) {
+      tableEl.removeChild(oldClone);
+      isCloned.value = false;
+    }
+    if (!isCloned.value) {
+      const clone = bodyEl.cloneNode(true);
+      clone.setAttribute('data-clone', 'true');
+      tableEl.appendChild(clone);
+      isCloned.value = true;
+    }
+    const target = scrollEl.firstElementChild?.firstElementChild || scrollEl;
+    timer.value = setInterval(() => {
+      target.scrollTop += 1;
+      if (target.scrollTop >= originalBodyHeight.value) {
+        target.scrollTop -= originalBodyHeight.value;
+      }
+    }, 20);
+  });
 };
 
 // 滚动-触底加载
@@ -370,4 +399,10 @@ onUnmounted(() => {
 .header-icon {
   white-space: nowrap;
 }
-</style>
+</style>
+watch(() => props.isScroll, (val) => {
+  nextTick(() => {
+    if (val) createScroll();
+    else clearnScroll();
+  });
+},{immediate:true});