如何实现左侧固定（冻结）、主体可滚动的Vue表格？

需要实现一个左侧蓝色区域固定（冻结）、主体内容可横向滚动的表格，效果如下：

当前使用的表格代码如下：

<table v-if="Object.keys(this.aum).length" class="table table-sm table-responsive border">
  <thead>
    <tr class="text-decoration-underline">
      <th colspan="3"></th>
      <th colspan="5">
        <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
          Tuần 39 (19/9- 25/9)
        </router-link>
      </th>
      <th colspan="5">
        <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
          Tuần 38 (12/9- 18/9)
        </router-link>
      </th>
      <th colspan="5">
        <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
          Tuần 37 (5/9- 11/9)
        </router-link>
      </th>
      <th colspan="5">
        <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
          Tuần 36 (1/9 - 4/9)
        </router-link>
      </th>
    </tr>
    <tr>
      <th colspan="3"></th>
      <template v-for="(n, i) in 4">
        <th :class="{ 'bg-body-light': !i }">Nạp</th>
        <th :class="{ 'bg-body-light': !i }">Rút</th>
        <th :class="{ 'bg-body-light': !i }">AuM</th>
        <th :class="{ 'bg-body-light': !i }">AuM lũy kế</th>
        <th :class="{ 'bg-body-light': !i }">% nắm giữ</th>
      </template>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="fw-bold">Tổng</td>
      <template v-for="(n, i) in 4">
        <td :class="{ 'bg-body-light': !i }">123</td>
        <td :class="{ 'bg-body-light': !i }">456</td>
        <td :class="{ 'bg-body-light': !i }">789</td>
        <td :class="{ 'bg-body-light': !i }">123</td>
        <td :class="{ 'bg-body-light': !i }">456</td>
      </template>
    </tr>
    <tr v-for="(item, key) in aum" :key="key + '-aum'">
      <td class="text-decoration-underline" colspan="3">
        <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
          {{ key }}
        </router-link>
      </td>
      <template v-for="(n, i) in 4">
        <td :class="{ 'bg-body-light': !i }">{{ item["old_user"]["deposit"] }}<span class="text-success">(+5%)</span></td>
        <td :class="{ 'bg-body-light': !i }">{{ item["old_user"]["withdraw"] }}<span class="text-danger">(-5%)</span></td>
        <td :class="{ 'bg-body-light': !i }">123</td>
        <td :class="{ 'bg-body-light': !i }">456</td>
        <td :class="{ 'bg-body-light': !i }">789</td>
      </template>
    </tr>
  </tbody>
</table>

解决方案 #

利用CSS的position: sticky属性即可实现需求，配合容器横向滚动，步骤如下：

1. 给表格加外层容器，开启横向滚动
2. 给左侧需要固定的单元格标记自定义类
3. 添加CSS样式实现固定效果并优化视觉区分

修改后的完整代码 #

HTML部分（已翻译中文）

<div class="table-container">
  <table v-if="Object.keys(this.aum).length" class="table table-sm border">
    <thead>
      <tr class="text-decoration-underline">
        <th colspan="3" class="sticky-col">固定区域</th>
        <th colspan="5">
          <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
            第39周(9/19-9/25)
          </router-link>
        </th>
        <th colspan="5">
          <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
            第38周(9/12-9/18)
          </router-link>
        </th>
        <th colspan="5">
          <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
            第37周(9/5-9/11)
          </router-link>
        </th>
        <th colspan="5">
          <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
            第36周(9/1-9/4)
          </router-link>
        </th>
      </tr>
      <tr>
        <th colspan="3" class="sticky-col"></th>
        <template v-for="(n, i) in 4">
          <th :class="{ 'bg-body-light': !i }">存入</th>
          <th :class="{ 'bg-body-light': !i }">取出</th>
          <th :class="{ 'bg-body-light': !i }">AuM</th>
          <th :class="{ 'bg-body-light': !i }">累计AuM</th>
          <th :class="{ 'bg-body-light': !i }">持有占比</th>
        </template>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="3" class="fw-bold sticky-col">总计</td>
        <template v-for="(n, i) in 4">
          <td :class="{ 'bg-body-light': !i }">123</td>
          <td :class="{ 'bg-body-light': !i }">456</td>
          <td :class="{ 'bg-body-light': !i }">789</td>
          <td :class="{ 'bg-body-light': !i }">123</td>
          <td :class="{ 'bg-body-light': !i }">456</td>
        </template>
      </tr>
      <tr v-for="(item, key) in aum" :key="key + '-aum'">
        <td class="text-decoration-underline sticky-col" colspan="3">
          <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
            {{ key }}
          </router-link>
        </td>
        <template v-for="(n, i) in 4">
          <td :class="{ 'bg-body-light': !i }">{{ item["old_user"]["deposit"] }}<span class="text-success">(+5%)</span></td>
          <td :class="{ 'bg-body-light': !i }">{{ item["old_user"]["withdraw"] }}<span class="text-danger">(-5%)</span></td>
          <td :class="{ 'bg-body-light': !i }">123</td>
          <td :class="{ 'bg-body-light': !i }">456</td>
          <td :class="{ 'bg-body-light': !i }">789</td>
        </template>
      </tr>
    </tbody>
  </table>
</div>

CSS部分

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

.sticky-col {
  position: sticky;
  left: 0;
  background-color: #cce5ff; /* 蓝色背景，可按需调整 */
  z-index: 10; /* 确保固定列在滚动内容上方 */
  border-right: 2px solid #dee2e6; /* 添加边框区分固定列与滚动列 */
}

/* 表头固定列层级更高，避免被tbody内容遮挡 */
thead .sticky-col {
  z-index: 20;
}

效果说明 #

• 外层容器table-container实现表格横向滚动
• sticky-col类通过position: sticky固定左侧列，背景色和边框可根据需求自定义
• 表头固定列设置更高层级，滚动时不会被下方内容覆盖

内容的提问来源于stack exchange，提问作者Minh Chau