如何在Vuetify 3中为v-data-table设置行类？

Vuetify 3 不再支持 Vuetify 2 里的 rowClass 属性，取而代之的是用 item-class prop 来实现行类的自定义。

实现步骤： #

1. 定义行类判断函数
   函数会接收当前行的 item 数据和 index 索引作为参数，根据业务逻辑返回对应的类名：

   const getRowClass = (item, index) => {
     // 示例：根据item的状态字段返回不同类名
     if (item.status === 'completed') return 'bg-blue-50 text-green-600'
     // 示例：偶数行添加灰色背景
     if (index % 2 === 0) return 'bg-gray-50'
     // 默认返回空字符串
     return ''
   }
   

2. 绑定到v-data-table组件
   将定义好的函数通过 :item-class 绑定到组件上：

   <v-data-table
     :items="yourDataset"
     :headers="yourTableHeaders"
     :item-class="getRowClass"
   ></v-data-table>
   

额外说明： #

• 如果不需要动态判断，也可以直接传入固定类名字符串或数组，比如：

  <!-- 单个类名 -->
  <v-data-table :item-class="'custom-static-row'"></v-data-table>
  <!-- 多个类名 -->
  <v-data-table :item-class="['row-style-1', 'row-style-2']"></v-data-table>
  

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