如何为Vuetify嵌套V-List中激活状态的子组标题添加背景色？

我来帮你搞定这个问题——你需要让嵌套的v-list-group标题（比如BusinessUnit A、Task Y）在激活（展开）时显示背景高亮，而不是只有hover效果或者字体变色。下面是具体的实现步骤：

步骤1：更新数据结构 #

先给tasks数组里的每个任务项添加active属性，用来控制内层组的激活状态：

businessUnits: [
  {
    businessUnitName: 'BusinessUnit A',
    municipality: 'Cityname',
    active: false, // 外层组激活状态
    tasks: [
      {
        taskName: 'Task Y',
        active: false, // 新增内层组激活状态
        responsible: {
          name: 'Max Müller',
          email: 'max.müller@test.mail.ch',
          phone: '+44 77 123 45 67',
          avatar: require("@/assets/avatar-placeholder.gif"),
        },
        deputy: {
          name: 'Katharina Knüller',
          email: 'katharina.knüller@test.mail.ch',
          phone: '+44 77 123 45 67',
          avatar: require("@/assets/avatar-placeholder.gif"),
        }
      }
    ]
  },
]

步骤2：修改模板绑定 #

调整v-list-group的绑定逻辑，并给激活器里的元素添加动态类，让激活状态和样式关联起来：

<template>
 <v-container>
 <v-list dense>
 <!-- 外层业务单元组 -->
 <v-list-group 
  v-for="businessUnit in businessUnits" 
  :key="businessUnit.businessUnitName" 
  v-model="businessUnit.active" 
  no-action
 >
 <template v-slot:activator>
  <!-- 给v-list-item添加动态类，根据active状态切换 -->
  <v-list-item :class="{ 'active-group-header': businessUnit.active }">
   <v-list-item-content>
    <v-list-item-title v-text="businessUnit.businessUnitName"></v-list-item-title>
   </v-list-item-content>
  </v-list-item>
 </template>

 <!-- 内层任务组 -->
 <v-list-group 
  v-for="item in businessUnit.tasks" 
  :key="item.taskName" 
  v-model="item.active" 
  no-action 
  sub-group
 >
 <template v-slot:activator>
  <!-- 同样给内层激活器添加动态类 -->
  <v-list-item :class="{ 'active-group-header': item.active }">
   <v-list-item-content>
    <v-list-item-title v-text="item.taskName"></v-list-item-title>
   </v-list-item-content>
  </v-list-item>
 </template>

 <!-- 原有内容保持不变 -->
 <v-list-item-group>
  <v-list-item>
   <v-list-item-content>
    <v-row>
     <v-col class="d-flex" cols="6" sm="6" >
      <v-list-item-avatar>
       <v-img :src='item.responsible.avatar'></v-img>
      </v-list-item-avatar>
      <v-list-item-content>
       <v-list-item-title class="mb-2" v-text="item.responsible.name"></v-list-item-title>
       <v-list-item-subtitle v-text="item.responsible.phone"></v-list-item-subtitle>
       <v-list-item-subtitle v-text="item.responsible.email"></v-list-item-subtitle>
      </v-list-item-content>
     </v-col>
     <v-col class="d-flex" cols="6" sm="6" >
      <v-list-item-avatar>
       <v-img :src="item.deputy.avatar"></v-img>
      </v-list-item-avatar>
      <v-list-item-content>
       <v-list-item-title class="mb-2" v-text="item.deputy.name + ' (Stv.)'"></v-list-item-title>
       <v-list-item-subtitle v-text="item.deputy.phone"></v-list-item-subtitle>
       <v-list-item-subtitle v-text="item.deputy.email"></v-list-item-subtitle>
      </v-list-item-content>
     </v-col>
     <v-col class="d-flex" cols="12">
      <v-divider></v-divider>
     </v-col>
    </v-row>
   </v-list-item-content>
  </v-list-item>
 </v-list-item-group>
 </v-list-group>
 </v-list-group>
 </v-list>
 </v-container>
</template>

步骤3：添加样式（解决scoped穿透问题） #

因为你的样式是scoped的，需要使用深度选择器来修改Vuetify组件内部的样式，或者把这段样式放在非scoped的style标签里：

<style scoped>
/* 使用深度选择器穿透scoped样式，确保样式能作用到Vuetify组件内部 */
::v-deep .active-group-header {
  background-color: #e3f2fd !important; /* 这里用浅蓝色示例，你可以换成想要的颜色 */
}

/* 如果需要优化hover状态的高亮效果，可以加上这段 */
::v-deep .active-group-header:hover {
  background-color: #bbdefb !important;
}
</style>

为啥之前的方法没生效？ #

• active-class是v-list-item-group的专属属性，v-list-group的激活器元素不会自动继承这个属性，所以得手动绑定组的v-model状态来添加类。
• 你之前直接给v-list-item-title加类，但它的父元素v-list-item有默认的padding和背景，直接给标题加背景不会铺满整个行，应该把类加在v-list-item上。
• Scoped样式会自动添加属性选择器，导致无法修改Vuetify组件内部的元素，所以必须用深度选择器::v-deep来穿透限制。

这样修改后，当你点击BusinessUnit A或者Task Y展开组时，对应的标题行就会显示你设置的背景高亮了。

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