Vuetify v-data-table в v-data-table: содержимое в слоте расширенного элемента неисправно

Question

в таблице vuetify я не хочу показывать некоторые заголовки и соответствующий им столбец. Вместо этого я хочу, чтобы они отображались в таблице в слоте для расширенных элементов. Элементы таблицы полностью доступны для редактирования пользователем. Это все тоже отлично работает.

Проблема в том, что в слоте расширенного элемента отображаются не только свойства выбранного элемента, но и свойства всех элементов.

В vue -dev-tools он отображается правильно. Я думаю, что мне здесь не хватает чего-то принципиально простого. У кого-нибудь есть идеи?

Заранее спасибо

Вот ссылка на песочницу: v-data-table в слоте расширенного элемента v-data-table, пользователь редактируемые

Answer 1

Вы можете сделать это, изменив :items="tabItems" на :items="[item]" (я поместил внутрь массива, потому что один элемент не читается с помощью: items v-data-table.

Если вы вызываете tabItems, вы будете перебирать снова все элементы, так что лучше использовать отфильтрованный элемент расширенного элемента, а не выполнять тяжелую работу вручную.

Я пробовал в вашей песочнице, вы можете изменить строку 54 с моим предложением, и вы можете проверить, что он работает хорошо.