固定標題列

stickyHeader2.vue

<template>
  <div>
    <table
      :style="{ maxWidth: `${bodyWidthString}` }"
    >
      <thead ref="head">
        <tr>
          <th
            v-for="(header,index) in headers"
            :key="index"
          >
            {{ header.text }}
          </th>
        </tr>
      </thead>
    </table>
    <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="i"
                >
                  {{ item[header.value] }}
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    </div>
    <div
      :style="{ maxWidth: `${bodyWidthString}` }"
    >
      <table>
        <tbody>
          <tr>
            <td
              v-for="(header,i) in headers"
              :key="i"
            >
              {{ sum[header.value] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>