Mon Mar 18 15:22:00 CST 2024 inscode

src/App.vue

 <template>
-  <div>
-    <i-table :data="tableData" :columns="tableColumns" :rowHeight="30" :visibleRowCount="10" />
+  <div id="app">
+    <VirtualScrollTable :data="data" :columns="columns" :height="height"></VirtualScrollTable>
   </div>
 </template>
 
 <script>
-import iTable from "./components/table.vue";
-
+import VirtualScrollTable from './components/table.vue';
 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"],
-    };
+  components: { VirtualScrollTable },
+  data: {
+    data: [],
+    columns: [
+      {
+        name: 'id',
+        label: 'ID'
+      },
+      {
+        name: 'name',
+        label: '姓名'
+      },
+      {
+        name: 'age',
+        label: '年龄'
+      }
+    ],
+    height: 300
   },
-};
+  mounted() {
+    // 模拟生成大量数据
+    for (let i = 0; i < 10000; i++) {
+      this.data.push({
+        id: i + 1,
+        name: '姓名' + (i + 1),
+        age: Math.floor(Math.random() * 100)
+      })
+    }
+  }
+}
 </script>

src/components/table.vue

 <template>
-  <div class="vue-table" ref="tableWrapper" @scroll="handleScroll">
-    <table>
+  <div class="table-wrapper">
+    <table :height="height" ref="table">
       <thead>
         <tr>
-          <th v-for="column in columns">{{ column }}</th>
+          <th v-for="column in columns" :key="column.name">
+            {{ column.label }}
+          </th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(row, index) in visibleRows" :key="index">
-          <td v-for="(value, key) in row">{{ value }}</td>
+        <tr v-for="item in renderedData" :key="item.id">
+          <td v-for="column in columns" :key="column.name">
+            {{ item[column.name] }}
+          </td>
         </tr>
       </tbody>
     </table>
@@ -17,71 +21,60 @@
 
 <script>
 export default {
+  name: 'VirtualScrollTable',
   props: {
     data: {
       type: Array,
-      required: true,
+      required: true
     },
     columns: {
       type: Array,
-      required: true,
+      required: true
     },
-    rowHeight: {
+    height: {
       type: Number,
-      required: true,
-    },
-    visibleRowCount: {
-      type: Number,
-      required: true,
-    },
+      default: 300
+    }
   },
-  data() {
+  data () {
     return {
+      renderedData: [],
       scrollTop: 0,
-      lastRenderedIndex: 0,
-    };
+      visibleRowsCount: 0,
+      rowHeight: 50
+    }
   },
-  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;
-    },
+  watch: {
+    scrollTop () {
+      this.updateRenderedData()
+    }
   },
-  methods: {
-    handleScroll(event) {
-      this.scrollTop = event.target.scrollTop;
-    },
+  mounted () {
+    this.visibleRowsCount = Math.ceil(this.height / this.rowHeight)
+    this.updateRenderedData()
   },
-};
+  methods: {
+    updateRenderedData () {
+      const startIndex = Math.floor(this.scrollTop / this.rowHeight)
+      const endIndex = startIndex + this.visibleRowsCount
+      this.renderedData = this.data.slice(startIndex, endIndex)
+    }
+  }
+}
 </script>
 
 <style>
-.vue-table {
-  height: 100%;
-  overflow-y: scroll;
+.table-wrapper {
+  overflow-y: auto;
 }
 
 table {
-  width: 100%;
   border-collapse: collapse;
-  table-layout: fixed;
+  width: 100%;
 }
 
-th,
-td {
-  padding: 8px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+th, td {
+  border: 1px solid #ddd;
+  padding: 5px;
 }
 </style>