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 类。如果它是一个字符串 - 那么它指定包含 CSS 类的项目对象内的属性。如果它是一个函数 - 那么它获取item作为其参数并且必须返回 CSS 类。

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 类名称作为 items 对象中的 prop 传递。简单来说就是这样：

\n

\n

模板：

\n

\n

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

\n

\n

数据对象：

\n

\n

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

\n

CSS：

\n

<style>\n    .blue-line td {\n        color: green;\n    }\n\n    .red-line td{\n        color: red;\n    }\n</style>\n

\n

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

\n