启用Vuetify 3 v-data-table-server加载进度条颜色和行悬停

kx5bkwkv 于 2023-03-24 发布在 Vue.js

关注(0)|答案(1)|浏览(295)

我无法在数据表中启用主题颜色。它在Vuetify 2.0上工作正常，但我使用的是Vuetify〉3.0，它不工作。
下面是一个基本的例子。
Vuetify.js

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

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

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  components: {
    ...labs,
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: "#1867C0",
          secondary: "#5CBBF6",
        },
      },
    },
  },
});

App.vue

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

主题颜色不起作用。

行悬停也不起作用。

下面是codesandbox的完整源代码。

vue.js

来源：https://stackoverflow.com/questions/75753819/enable-vuetify-3-v-data-table-server-loading-progress-bar-colors-and-row-hover

1条答案

按热度按时间

6gpjuf901#

目前（Vuetify 3.1.9），你可以通过将:loading属性设置为颜色名称（而不是true）来设置v-data-table-server中进度条的颜色：

const loadItems = async (options) => {
  loading.value = 'primary'
  serverItems.value = await loadData(options)
  loading.value = false
}

x一个一个一个一个x一个一个二个一个x一个一个三个一个
至于行悬停，是的，它似乎还没有实现，至少我在源代码中找不到它。Vuetify 2 CSS类的调整版本是：

.v-theme--light.v-data-table > .v-table__wrapper > table > tbody
> tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) 
> td {
  background: #eee;
}

不确定:not类是否仍按预期工作。

赞(0）回复(0）举报 2023-03-24

我来回答

启用Vuetify 3 v-data-table-server加载进度条颜色和行悬停

1条答案

相关问题

热门标签

最新问答