在 Vuetify 数据中使用组件 table

Question

我有一个 Nuxt 2.9.0 应用程序，我正在使用 @nuxtjs/vuetify 1.11.3。

我正在重构应用程序中的一些 HTML table 并将它们替换为 Vuetify 的 v-data-table 组件。现在，在我们的旧 table 中，我们有这些条形图组件，我们将在 table 单元格内呈现这些组件，如下所示：

<th>
  {{ totalAvg }}
  <RatingBar :color="ratingColor(totalAvg)" />
</th>

RatingBar 组件基本上只是一个带有背景颜色的空 div，如下所示

在移动到 Vuetify 数据 tables 时我可以保留此功能的正确方法是什么？

我知道 Vuetify 实现了一些插槽，例如 #header 插槽，但我不确定插槽在 table 单元格中的确切工作方式，因为 #header 插槽，例如，似乎只是附加任何你为插槽写下的 <template>，而不是实际替换 header

Answer 1

Vuetify 的 v-data-table 支持通过 #item.<name> 对特定列进行自定义呈现。 Link to API doc.

Using a component inside of a Vuetify data table