虛擬表格的標題列

stickyHeader.vue

<template>
  <div
    ref="viewport"
    :style="{ height: `${containerHeight}px` }"
    @scroll.passive="onScroll"
  >
    <table
      :class="$style.header"
    >
      <thead>
        <tr>
          <th
            v-for="(header,index) in headers"
            :key="index"
          >
            {{ header.text }}
          </th>
        </tr>
      </thead>
    </table>
    <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>