Vuetify 3中v-data-table-server加载进度条颜色与行悬停失效问题

问题描述 #

在Vuetify 3及以上版本使用v-data-table-server组件时，存在两个异常：

• 自定义主题的primary/secondary颜色未应用到组件
• 行悬停效果完全失效

解决方案 #

1. 恢复行悬停效果 #

v-data-table-server作为实验室组件，默认未启用行悬停特性，需手动添加hover属性：

<v-data-table-server 
  :headers="headers" 
  :items="items" 
  :loading="true"
  hover
></v-data-table-server>

2. 应用主题颜色到组件 #

Vuetify 3实验室组件不会自动继承主题色，可通过两种方式实现：

方式一：自定义CSS覆盖样式

在全局样式或组件内样式中添加：

/* 表头使用主题primary色 */
.v-data-table-server thead tr th {
  background-color: var(--v-primary-base) !important;
  color: var(--v-primary-inverse) !important;
}

/* 行悬停使用primary色的浅色变体 */
.v-data-table-server tbody tr:hover {
  background-color: var(--v-primary-lighten4) !important;
}

方式二：通过组件props绑定主题色

利用header-props直接为表头绑定主题色：

<v-data-table-server 
  :headers="headers" 
  :items="items" 
  :loading="true"
  hover
  :header-props="{ color: 'primary' }"
></v-data-table-server>

3. 确认Vuetify配置有效性 #

你的现有Vuetify配置已正确注册实验室组件并启用主题，无需修改：

// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";

// Composables
import { createVuetify } from "vuetify";
import * as labs from "vuetify/labs/components";

export default createVuetify({
  components: {
    ...labs,
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: "#1867C0",
          secondary: "#5CBBF6",
        },
      },
    },
  },
});

内容的提问来源于stack exchange，提问作者Ersin Güvenç