Vue3中点击v-data-table复选框修改行背景色的实现方案

由于Vuetify 3移除了Vuetify 2中自动为选中行添加样式类的机制，我们可以通过以下步骤实现点击复选框时切换对应行的背景色：

1. 定义选中行的样式 #

在组件样式区域添加选中行的背景色样式：

<style scoped>
.filelist .selected-row {
  background-color: #e3f2fd; /* 可根据需求自定义颜色 */
}
</style>

2. 为表格添加动态行类绑定 #

修改v-data-table标签，新增:item-class属性来动态控制行的样式类：

<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
  :item-class="getRowClass" <!-- 新增该行 -->
>
<!-- 原有插槽内容保持不变 -->
</v-data-table>

3. 实现选中状态判断方法 #

在组件的脚本部分添加getRowClass方法，根据当前行是否在选中数组中返回对应的样式类：

const getRowClass = (item) => {
  // 基于item-key（此处为name）判断行是否被选中
  return selectedItems.value.some(selected => selected.name === item.name) ? 'selected-row' : ''
}

功能说明 #

当点击复选框时，selectedItems数组会自动更新，getRowClass方法会重新计算每一行的样式类，从而实时切换选中行的背景色。

内容的提问来源于stack exchange，提问作者Rakshith Ganga