Изменение цвета фона при установке флажка в таблице v-данных с помощью vue 3

Я ищу решение, в котором цвет фона строк таблицы v-данных может применяться всякий раз, когда устанавливается флажок таблицы.

Это код vue 3, который я использую для решения проблемы:

<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>

Мне нужно изменить приведенный выше код для изменения цвета фона.

Я обнаружил, что для vuetify 2 v-data-table всякий раз, когда мы переключаем флажок, для соответствующей строки добавляется новый класс. Но этого не происходит с vuetify 3 v-data-table.