#vue.js #nuxt.js #vuetify.js
#vue.js #nuxt.js #vuetify.js
Вопрос:
У меня есть 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>
вы записываете для слота, вместо того, чтобы фактически заменять заголовок
Ответ №1:
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.