Блог

У меня есть 2.9.0 приложение Nuxt, которое я использую @nuxtjs/vuetify 1.11.3 .

Я рефакторингую некоторые HTML-таблицы, которые у нас есть в приложении, и заменяю их v-data-table компонентами Vuetify. Теперь, в наших старых таблицах у нас были эти компоненты гистограммы, которые мы отображали внутри ячеек таблицы, вот так:

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

Этот RatingBar компонент в основном представляет собой просто пустой div с цветом фона, как вы можете видеть ниже

Как правильно сохранить эту функциональность при переходе к таблицам данных Vuetify?

Я знаю, что Vuetify реализует некоторые слоты, например #header , слот, но я не уверен точно, как работают слоты, когда дело доходит до ячеек таблицы, поскольку #header слот, например, кажется, просто добавляет все, что <template> вы записываете для слота, вместо того, чтобы фактически заменять заголовок

Vuetify v-data-table поддерживает пользовательский рендеринг для определенного столбца #item.<name> . <a rel=»noreferrer noopener nofollow» href=»https://vuetifyjs.com/en/api/v-data-table/#item.» rel=»nofollow noreferrer»>Ссылка на документ API.