Vuetify 2.x数据表格无效任务行着色失效问题求助

针对你遇到的v-data-table通过item-class添加红色背景不生效的问题，给你几个可行的修复方案：

1. 修复样式作用域渗透问题 #

如果你的样式写在单文件组件的<style scoped>标签内，默认样式无法渗透到Vuetify内部生成的表格行元素上，需要使用深度选择器来突破作用域限制：

<style scoped>
::v-deep .invalid-row {
  background-color: rgb(255, 0, 0) !important;
}
</style>

注：Vue 2 + Vuetify 2环境下，也可以用/deep/替代::v-deep，两者效果一致。

2. 完善item-class方法的返回逻辑 #

当前你的getRowClass方法仅在满足条件时返回类名，未满足条件时无返回值，虽然不影响核心逻辑，但建议明确返回空字符串，避免潜在的逻辑异常：

getRowClass(val) {
  return val.in_use && !this.isTaskValid(val) ? 'invalid-row' : '';
}

3. 提升样式优先级（可选） #

如果上述方案仍不生效，可以进一步提升选择器优先级，直接指定表格行元素：

::v-deep tr.invalid-row {
  background-color: rgb(255, 0, 0) !important;
}

调试时可以先通过浏览器开发者工具检查无效任务对应的行是否已成功添加invalid-row类：如果类名存在但样式未生效，重点排查样式作用域和优先级问题；如果类名未添加，则检查getRowClass的逻辑判断是否正确。

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