我有一个使用 Vuetify 表的 Vue 应用程序，该表不支持边框表（但请参阅 https://github.com/vuetifyjs/vuetify/issues/16336 ）。这就是为什么我尝试使用自己的 CSS 来添加缺失的边框。
给出以下示例（复制链接）
2
1175<template>
<v-app>
<v-main>
<v-table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<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">
{{ cell.content }}
</template>
</td>
</template>
</tr>
</tbody>
</v-table>
</v-main>
</v-app>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue';
interface Cell { isCoveredByPreviousCell: boolean; rowspan: number; content?: string; }
type TableMatrix = Cell[][];
const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "cell with rowspan 1" };
const tableMatrix: Ref<TableMatrix> = ref([
[{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }],
[{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }],
[{ ...childCell },{ ...childCell }],
[{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" }],
[{ ...childCell }, { isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" }],
[{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }],
[{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }],
])
</script>
<style>
table { border: 1px solid #e6e6e6; }
table th { border-top: 1px solid #e6e6e6; }
table th + th { border-left: 1px solid #e6e6e6; }
table td + td { border-left: 1px solid #e6e6e6; }
</style>
如果最后一个单元格的行跨度大于 1，您可以看到它的边框较粗
有人知道缺少哪个CSS“规则”来修复这种情况下的表格边框吗？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
使用 slot=item，然后根据作用域插槽应用样式。
下面是一个示例：
显示代码片段
使用 slot=item.name。
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%', }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%', }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%', }, ], } }, }) .my-border { border-left: 5px solid red; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.2/dist/vuetify.min.css"> <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.2/dist/vuetify.min.js"></script> <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" > <template slot="item.name" slot-scope="data"> <div :class="data.item.calories % 2 === 0 ? 'my-border': ''">{{data.item.name}}</div> </template> </v-data-table> </v-app> </div>只需将
border-collapse:collapse;属性添加到表格即可。table { border-collapse: collapse; }