相关文章推荐

素の table タグに設定しているのと変わらないので、他にも流用できると思います。
v-table は props に先頭行・末尾行を固定にする設定(fixed-header、fixed-footer)があるので、それで十分なら props で設定した方が簡単です。

<template>
    <v-table>
      <thead>
          <th v-for="col in columns">{{ col }}</th>
      </thead>
      <tbody>
        <tr v-for="row in cells">
          <td v-for="col in row">{{ col }}</td>
      </tbody>
    </v-table>
</template>
<script lang="ts">
export default {
  data() {
    const columns = Array
      .from({ length: 100 })
      .map((_, i) => i);
    const cells = Array
      .from({ length: 100 })
      .map((_, i) =>
        Array
          .from({ length: 100 })
          .map((_, i) => i)
    return ({
      columns,
      cells,
</script>
<style scoped>
div {
  width: 100vw;
  height: 100vh;
thead {
  z-index: 2 !important;
  position: sticky;
  top: 0;
  width: 40px;
  background-color: white;
th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3 !important;
  position: sticky;
  left: 0;
  width: 40px;
  background-color: white;
td:nth-child(1) {
  z-index: 1;
</style>
 
推荐文章