虛擬滾動表格的解說程式碼

scroll.vue

<template>
  <div
    ref="viewport"
    :style="{ height: `${viewportHeight}px` }"
    @scroll.passive="onScroll"
  >
    <div
      :style="{ height: `${totalHeight}px` }"
    >
      <section
        :style="{ transform: `translateY(${bodyTranslateY}px)` }"
      >
        <table
          ref="body"
          :style="{ height: `${minBodyHeight}px` }"
        >
          <tbody>
            <tr
              v-for="(item, index) in renderItems"
              ref="row"
              :key="index"
            >
              <td
                v-for="(header,i) in headers"
                :key="'item'+i"
              >
                {{ item[header.value] }}
              </td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>