Mon Mar 18 11:37:00 CST 2024 inscode

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div>
+    <i-table :data="tableData" :columns="tableColumns" :rowHeight="30" :visibleRowCount="10" />
   </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script>
+import iTable from "./components/table.vue";
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+export default {
+  components: {
+    iTable,
+  },
+  data() {
+    return {
+      tableData: [
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+        { id: 1, name: "John Doe", age: 30 },
+        { id: 2, name: "Jane Doe", age: 25 },
+        { id: 3, name: "Bob Smith", age: 40 },
+        { id: 4, name: "Alice Johnson", age: 35 },
+        { id: 5, name: "Tom Brown", age: 28 },
+        { id: 6, name: "Sara Lee", age: 32 },
+        { id: 7, name: "Mike Smith", age: 45 },
+        { id: 8, name: "Lucy Chen", age: 27 },
+        { id: 9, name: "David Wang", age: 38 },
+        { id: 10, name: "Grace Zhang", age: 31 },
+        { id: 11, name: "Jack Ma", age: 50 },
+        { id: 12, name: "Maggie Lee", age: 29 },
+      ],
+      tableColumns: ["ID", "Name", "Age"],
+    };
+  },
+};
+</script>

src/components/table.vue

+<template>
+  <div class="vue-table" ref="tableWrapper" @scroll="handleScroll">
+    <table>
+      <thead>
+        <tr>
+          <th v-for="column in columns">{{ column }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in visibleRows" :key="index">
+          <td v-for="(value, key) in row">{{ value }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    rowHeight: {
+      type: Number,
+      required: true,
+    },
+    visibleRowCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      lastRenderedIndex: 0,
+    };
+  },
+  computed: {
+    visibleRows() {
+      const startIndex = Math.floor(this.scrollTop / this.rowHeight);
+      const endIndex = startIndex + this.visibleRowCount;
+      this.lastRenderedIndex = endIndex;
+      return this.data.slice(startIndex, endIndex);
+    },
+    tableHeight() {
+      return this.rowHeight * this.data.length;
+    },
+    wrapperHeight() {
+      return this.rowHeight * this.visibleRowCount;
+    },
+  },
+  methods: {
+    handleScroll(event) {
+      this.scrollTop = event.target.scrollTop;
+    },
+  },
+};
+</script>
+
+<style>
+.vue-table {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+th,
+td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>