완전히 테두리가 있는 Vuetify HTML 테이블 구현: 단계별 가이드
<p>경계 테이블을 지원하지 않는 Vuetify 테이블을 사용하는 Vue 앱이 있습니다(단, https://github.com/vuetifyjs/vuetify/issues/16336 참조). 그래서 내 CSS를 사용하여 누락된 테두리를 추가해 보았습니다.</p>
<p>给出以下示例（复主链接）</p>
<pre class="brush:php;toolbar:false;"><템플릿>
<v-앱>
<v-메인>
<v-테이블>
<머리>
<tr>
<번째> 컬럼 1
<th>Col 2</th>
</tr>
</머리>
<본문>
<tr v-for="(row, rowIndex) in tableMatrix" :key="rowIndex">
<template v-for="(cell, columnIndex) in row"; :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-메인>
</v-앱>
</템플릿>
<스크립트 설정 lang="ts">
'vue'에서 { ref, Ref } 가져오기;
인터페이스 셀 { isCoveredByPreviousCell: 부울; 행 범위: 숫자; 내용?: 문자열; }
Type TableMatrix = Cell[][];
const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "rowspan 1이 있는 셀" };
const tableMatrix: Ref<TableMatrix> = 심판([
[{ isCoveredByPreviousCell: false, rowspan: 2, content: "rowspan 2가 있는 셀" },{ ...childCell }],
[{ isCoveredByPreviousCell: true, rowspan: 1, 콘텐츠: "부모에 의해 보호됨" },{ ...childCell }],
[{ ...childCell },{ ...childCell }],
[{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "rowspan 2가 있는 셀" }],
[{ ...childCell }, { isCoveredByPreviousCell: true, rowspan: 1, 콘텐츠: "부모에 의해 보호됨" }],
[{ isCoveredByPreviousCell: false, rowspan: 2, content: "rowspan 2가 있는 셀" },{ ...childCell }],
[{ isCoveredByPreviousCell: true, rowspan: 1, 콘텐츠: "부모에 의해 보호됨" },{ ...childCell }],
])
</스크립트>
<스타일>
테이블 { 테두리: 1px 솔리드 #e6e6e6; }
테이블 th { border-top: 1px solid #e6e6e6; }
테이블 th + th { border-left: 1px solid #e6e6e6; }
테이블 td + td { 테두리 왼쪽: 1px 솔리드 #e6e6e6; }
<p>마지막 셀의 행 범위가 1보다 크면 테두리가 더 두꺼운 것을 볼 수 있습니다</p>
<p>이 경우 표 테두리를 수정하기 위해 어떤 CSS "규칙"이 누락되었는지 아는 사람이 있습니까? </p>
