'How to prevent v-slot:body from overwriting v-data-table property show-expand with Vue
It seems that v-slot:body overwrites data table properties like show-expand.
<div class="d-flex mb-0 overflow-hidden">
<v-data-table
item-key="id"
hide-default-footer
fixed-header
disable-sort
:headers="headers"
:items="items"
:items-per-page="-1"
:expanded.sync="expanded"
show-expand
>
<template v-slot:body="props">
<tbody v-if="props.items.length === 0">
<tr class="v-data-table__empty-wrapper">
<td colspan="9">{{ $t('No data available') }}</td>
</tr>
</tbody>
<template v-else>
<tbody v-for="item in getItems(props)" :key="item.id">
<tr
v-for="(action, actionIndex) in getActions(item)"
:key="action.id"
:class="action.dueTimeDelta.futureGrace ? 'action-operation--grace-period' : ''"
>
<template v-if="actionIndex === 0">
<td :rowspan="item.actions.length">
<ticket-number :ticket-number="item.ticketNumber" />
</td>
<td :rowspan="item.actions.length">
<user-avatar v-if="item.user" :user="item.user" :size="36" />
</td>
<td :rowspan="item.actions.length">
<a
:title="$t('Open plan in new tab')"
:href="item.monitorUrl"
target="_blank"
>
{{ item.name }}
</a>
</td>
<td :rowspan="item.actions.length">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="grey"
small
elevation="0"
:loading="getItemDataById(item.id).inpOperationPending"
v-bind="attrs"
v-on="on"
>
{{ $t('INP') }}
</v-btn>
</template>
<v-list dense>
<v-list-item
link
:title="$t('Finishes the notification for the ticket')"
@click="handleInpOperationFinishedClick(item)"
>
<v-list-item-title>
{{ $t('Finish INP') }}
</v-list-item-title>
</v-list-item>
<v-list-item
link
:title="$t('Ignores the notification for the ticket')"
@click="handleInpOperationIgnoreAllClick(item)"
>
<v-list-item-title>
{{ $t('Ignore INP') }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</td>
<td class="table__hostnames" :rowspan="item.actions.length">
<ul class="pa-0">
<li v-for="hostName in getHostNames(item)" :key="hostName">
{{ hostName }}
</li>
</ul>
</td>
</template>
<td class="action-operation__btn">
<v-btn
class="action-operation-content"
icon
@click.stop="handleShowInpActionDetailsClick(item, action)"
>
<v-icon :color="action.notificationRelevant ? 'alarming' : ''">
{{ getActionTypeIcon(action) }}
</v-icon>
</v-btn>
</td>
<td class="table__time">
<span class="action-operation-content">{{ $t(`${action.ttaat} m`) }}</span>
</td>
<td class="table__date">
<timer class="action-operation-content" :time-delta="action.dueTimeDelta" />
</td>
<td>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="action-operation-content"
color="secondary"
small
dark
elevation="0"
:loading="getItemDataById(item.id).inpActionOperationPending[action.id]"
v-bind="attrs"
v-on="on"
>
{{ $t('Action') }}
</v-btn>
</template>
<v-list dense>
<v-list-item
link
:title="$t('Marks the action as done')"
@click="handleInpActionOperationDoneClick(item, action)"
>
<v-list-item-title>
{{ $t('Done') }}
</v-list-item-title>
</v-list-item>
<v-list-item
link
:title="$t('Marks the action as ignored')"
@click="handleInpActionOperationIgnoreClick(item, action)"
>
<v-list-item-title>
{{ $t('Ignore') }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</td>
</tr>
</tbody>
</template>
</template>
So due to that no expand icon is being displayed in that row. Is there another way to create expandable rows or is there an alternative to the way I am using <template v-slot:body="props">? Or do I have too much business logic inside the hmtl part? Help is very much appreciated.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
