Vuetify 3：v-table で先頭行と先頭列を固定してスクロール

Sat, 14 Oct 2023 10:16:25 +0900

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

<template>
 <div>
 <v-table>
 <thead>
 <tr>
 <th v-for="col in columns">{{ col }}</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="row in cells">
 <td v-for="col in row">{{ col }}</td>
 </tr>
 </tbody>
 </v-table>
 </div>
</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;
}

th {
 width: 40px;
 background-color: white;
}

th:nth-child(1) {
 position: sticky;
 left: 0;
 z-index: 3 !important;
}

td {
 position: sticky;
 left: 0;
 width: 40px;
 background-color: white;
}

td:nth-child(1) {
 z-index: 1;
}
</style>

Vuetify 3：v-overlay の透明度を変更するには

Sat, 07 Oct 2023 10:43:00 +0900

Vuetify 2 は props にありましたが、3 には無いので css で変更します。
対象のコンポーネントでのみ透明度を変更する場合の例です。

<template>
 <slot />
 <v-overlay
 class="hoge"
 >
 <v-btn>test</v-btn>
 </overlay>
</template>

<style scoped>
.hoge :deep(.v-overlay__scrim) {
 opacity: 0;
}
</style>

コンポーネント内のクラスである hoge 配下にある v-overlay__scrim クラスの透明度を 0 に変更することで、透明なオーバーレイになります。
他の所の v-overlay は透明度 0.32（デフォルト）で使えます。

Vue on いつかの熊右衛門

Vuetify 3：v-table で先頭行と先頭列を固定してスクロール

Vuetify 3：v-overlay の透明度を変更するには