I am looking for a solution where background color of v-data-table rows can be applied whenever the checkbox of the table is toggled.
This is the vue 3 code that I am using for the problem,
<v-data-table
v-if="makeFilelist"
:headers="makeHeaders"
:items="makeFilelist"
:items-per-page="10"
:items-per-page-options="items_per_page"
:key="getCurrentPathNum"
:single-select="false"
item-key="name"
show-select
v-model="selectedItems"
@update:options="updateOptions"
@click:row="OnClick"
mobile-breakpoint="0"
items-per-page-text="表示件数:"
class="elevation-0 filelist"
:footer-props="footerProps"
@contextmenu:row="show"
@pagination="paginate"
:loading="isGettingFileLists"
return-object
>
<template v-slot:top="{ pagination, options, updateOptions }">
<v-data-table-footer
:pagination="pagination"
:options="options"
@update:options="updateOptions"
:items-per-page-text="itemsPerPageText"
:items-per-page-options="itemsPerPageOptions"
:show-first-last-page="true"
id="d-table-header"
>
</v-data-table-footer>
</template>
<template v-slot:[`item.icon`]="{ item }">
<td><v-img :src="selectIcon(item)" contain width="50px"></v-img></td>
</template>
<template v-slot:[`item.name`]="{ item }">
<td :style="switchNameStyle(item)">{{ item.name }}</td>
</template>
<template v-slot:[`item.fileSizeString`]="{ item }">
<td :style="switchSizeStyle(item)">{{ item.fileSizeString }}</td>
</template>
<template v-slot:[`item.localUpdateTimeString`]="{ item }">
<td :style="switchSizeStyle(item)">{{ item.localUpdateTimeString }}</td>
</template>
<template v-slot:[`item.generation`]="{ item }">
<td>
<!-- modified width for displaying generation icon correctly in the filelist -->
<v-img
:src="generationIcon(item)"
contain
width="40px"
@click.stop="OnListGenerationClick(item)"
></v-img>
</td>
</template>
<template v-slot:[`item.kayoishare`]="{ item }">
<td>
<!-- modified width for displaying share icon correctly in the filelist -->
<v-img
class="kayoiShareIcon"
:src="kayoiShareIcon(item)"
contain
width="40px"
@click.stop="OnListKayoiShare(item)"
></v-img>
</td>
</template>
<template v-slot:[`item.download`]="{ item }">
<td>
<!-- modified width for displaying download icon correctly in the filelist -->
<v-img
class="downloadIcon"
:src="downloadIcon(item)"
contain
width="40px"
@click.stop="OnListDownload(item)"
></v-img>
</td>
</template>
</v-data-table>
I need to modify the above code for modifying the background color
I have found out that for vuetify 2 v-data-table, whenever we toggle the checkbox, a new class is being added for the corresponding row. But the same is not being occurred for vuetify 3 v-data-table.
.v-data-table__tr:has(td:first-child input[type='checkbox']:checked) {
backgroundColor: red // replace with any color you want
}
playground: