Синтаксис v-слота шаблона таблицы V-данных

Привет и спасибо, что прочитали мой вопрос.

У меня есть такой массив объектов:

[{
  id=1,
  products= [a,b,c]
 },
 {
  id=2,
  products= [d,e,f]
 }]

Я хочу отображать данные в таблице v-данных с двумя столбцами (идентификатор и продукты) и элементы продуктов во вложенной таблице v-данных.

Пока что я обнаружил, что мне следует использовать шаблон и v-слот, но я не нашел правильного способа сделать это.

<v-data-table            
        item-key="id"
        items={products}
      >
        <template v-slot="">
          <v-data-table> ... </v-data-table>
        </template>

      </v-data-table>

Вместо вложенной таблицы получаю

[object Object],[object Object]

Как использовать шаблон v-slot в tsx файлах? И в более общем плане, как «перевести» vuetify js в tsx (документация)?

Спасибо еще раз


vue.js vuetify.js tsx
person Nawick    schedule 24.02.2021    source источник
comment
Вы пробовали пример, который я привел?   -  person Nicolas Durant    schedule 02.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

вы создали правильный слот, но вам нужно указать vuetify, к какому слоту вы хотите получить доступ. Чтобы получить доступ к слоту <td> по умолчанию для всех строк, вы можете просто использовать v-slot:body="{ items }" и передать ему элементы, чтобы вы могли создать представление для каждого столбца. (Доступные слоты перечислены здесь Vuetify doc, если прокрутить вниз. Каждый компонент есть)

Я сделал код, который вы можете проверить Codepen. Что касается перевода его на tsx, я не могу вам помочь, так как я не работал с ним, но если вы уловили концепцию того, как это сделать в части vuetify, у вас должно быть хорошо!

person Nicolas Durant    schedule 25.02.2021
comment
Спасибо за ответ, Николас. Нам удалось реализовать вложенную таблицу данных с помощью Vue. Однако перевести на TSX не удалось. Мы откатились на Vue, так как не нашли много документации по этому вопросу. - person Nawick; 04.03.2021