Vuetify 数据表：item-class 什么都不做

Question

我真的对 Vuetify (v. 2.3.4) 数据表中的 ":item-class" 属性感到困惑。即使我尝试添加静态文本类，它也无济于事。

<v-data-table class="mt-10"
                      item-key="id"
                      :headers="headers"
                      :items="user_tender_assignment_table.user_tender_assignments"
                      :loading="user_tender_assignment_table.loading"
                      :loading-text="tables.loading_text"
                      :search="user_tender_assignment_table.search"
                      v-model="user_tender_assignment_table.selected"
                      :footer-props="tables.footer_props"
                      :item-class="'xxx'"
</v-data-table>

它只是渲染tr标签，没有任何类：

你知道为什么吗？我认为它在前一段时间有效，我还没有更改 Vuetify (2) 版本。

Answer 1

在我的例子中，我为 item-class 选择字符串类型，然后您可以将任何 CSS 类名称作为道具传递给您的 items 对象。简化后是这样的：

模板：

<v-data-table
     :headers="headers"
     :items="lineas"
      item-class="color"
      ...
</v-data-table>

数据对象：

data: () => ({
     lineas: [
       {text: 'Fecha',align: 'start',sortable: true,value: 'fecha', color: 'red-line'},
       {text: 'Descripción',align: 'start',sortable: false,value: 'descripcion', color: 'blue-line'},
      ],
})

CSS：

<style>
    .blue-line td {
        color: green;
    }

    .red-line td{
        color: red;
    }
</style>

为了使其正常工作，必须至少将 Vuetify 更新到 v2.3.8，因为最近包含此功能（2020 年 5 月）： https://github.com/vuetifyjs/vuetify/pull/11254

Answer 2

您可以使用item-class，如下所示：

<template>:

<v-data-table
    :headers="headers"
    :items="items"
    :item-class="rowClass"
></v-data-table>

<script>:

methods: {
    rowClass(item) {
        console.log(item)
        const rowClass = 'myclass'
        return rowClass;
    }
}

<style>:

<style lang="css">
.myclass {
  color: red;
  background-color: green;
}
</style>

Answer 3

item-class 不直接指定 CSS 类。如果它是一个字符串 - 那么它指定包含 CSS 类的项目对象内的属性。如果它是一个函数 - 那么它获取 item 作为它的参数并且必须返回 CSS 类。