在 Vuetify v-data-table 中添加行间距答案

【问题标题】：Add spacing between rows in Vuetify v-data-table在 Vuetify v-data-table 中添加行间距
【发布时间】：2020-06-16 23:27:12
【问题描述】：

我正在尝试将 v-data-table 中的边框间距更改为：

border-spacing: 0 0.5rem;

我尝试用 css 设置它：

v-data-table > div > table {
  border-spacing: 0 0.5rem;
}

或

.v-data-table table {
  border-spacing: 0 0.5rem;
}

但是这两个都不起作用。知道如何更改 v-data-table 中的行之间的空间吗？

【问题讨论】：

【解决方案1】：

您可以在下面添加选择器

.v-data-table > .v-data-table__wrapper > table {
    border-spacing: 0 0.5rem;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

您需要使用深度 css 选择器 >>> 将 CSS 注入到其他组件中。

例如，

.a >>> .b { /* ... */ }

将被编译成

.a[data-v-f3f3eg9] .b { /* ... */ }

所以你可能想做类似的事情

v-data-table >>> div > table {
  border-spacing: 0 0.5rem;
}

【讨论】：