完全に枠線付きの Vuetify HTML テーブルの実装: ステップバイステップ ガイド
<p>Vuetify テーブルを使用する Vue アプリがありますが、境界テーブルはサポートされていません (ただし、https://github.com/vuetifyjs/vuetify/issues/16336 を参照)。そこで、不足している枠線を独自の CSS を使用して追加してみました。 </p>
<p>次の例を示します (リンクをコピー)</p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<v-アプリ>
<v-main>
<v-テーブル>
<頭>
<tr>
列 1
列 2
</tr>
</頭>
<みんな>
<tr v-for="(row, rowIndex) in tableMatrix" :key="rowIndex">
<template v-for="(セル、columnIndex) 行内" :key="columnIndex">
<td v-if="cell.isCoveredByPreviousCell" class="d-none" />
<td v-else :rowspan="cell.rowspan">
<template v-if="cell.content">
{{ セル.コンテンツ }}
</テンプレート>
</td>
</テンプレート>
</tr>
</tbody>
</v-テーブル>
</v-main>
</v-app>
</テンプレート>
<スクリプトセットアップ lang="ts">
import { ref, Ref } から 'vue';
インターフェイス Cell { isCoveredByPreviousCell: ブール値; 行スパン: 数値; コンテンツ?: 文字列; }
タイプ TableMatrix = Cell[][];
const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "行範囲 1 のセル" };
const tableMatrix: Ref<TableMatrix> = ref([
[{ isCoveredByPreviousCell: false, rowspan: 2, content: "行範囲 2 のセル" },{ ...childCell }],
[{ isCoveredByPreviousCell: true, rowspan: 1, content: "親によってカバーされています" },{ ...childCell }],
[{ ...childCell },{ ...childCell }],
[{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "行範囲 2 のセル" }],
[{ ...childCell }, { isCoveredByPreviousCell: true, rowspan: 1, content: "親によってカバーされている" }],
[{ isCoveredByPreviousCell: false, rowspan: 2, content: "行範囲 2 のセル" },{ ...childCell }],
[{ isCoveredByPreviousCell: true, rowspan: 1, content: "親によってカバーされています" },{ ...childCell }],
])
</スクリプト>
<スタイル>
テーブル { ボーダー: 1px ソリッド #e6e6e6; }
テーブル th { border-top: 1px ソリッド #e6e6e6; }
テーブル th th { border-left: 1px ソリッド #e6e6e6; }
テーブル td td { border-left: 1px ソリッド #e6e6e6; }
</style></pre>
<p>最後のセルの行範囲が 1 より大きい場合、境界線が太くなっていることがわかります</p>
<p>この場合、表の境界線を修正するためにどの CSS 「ルール」が欠落しているか知っている人はいますか? </p>
