浏览代码

[frontend] Add scroll to end event to the HueTable Vue component

Johan Ahlen 4 年之前
父节点
当前提交
383f3f4c16
共有 1 个文件被更改,包括 8 次插入1 次删除
  1. 8 1
      desktop/core/src/desktop/js/components/HueTable.vue

+ 8 - 1
desktop/core/src/desktop/js/components/HueTable.vue

@@ -18,7 +18,7 @@
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="hue-table-container">
+  <div ref="tableContainer" class="hue-table-container" @scroll="onContainerScroll">
     <table class="hue-table" :class="{ 'hue-table-sticky-header': stickyHeader }">
       <caption>
         <!-- Because of Web:TableWithoutCaptionCheck -->
@@ -81,6 +81,13 @@
     cellSlotName(column: Column<T>): string {
       return 'cell-' + column.key;
     }
+
+    onContainerScroll(): void {
+      const containerEl = <HTMLElement>this.$refs.tableContainer;
+      if (containerEl.scrollHeight === containerEl.scrollTop + containerEl.clientHeight) {
+        this.$emit('scroll-to-end');
+      }
+    }
   }
 </script>