Vuetify data-table 单元格着色

Question

我有一个 vuetify v-data-table，我想根据条件为单元格着色。有没有简单的方法可以做到这一点？

示例：

data() {
  return {
    personnel: 'Max Muster',
    column2: {
            qualified: false,
            wish: '',
            allocation: '',
          },
    column3: {
            qualified: true,
            wish: '',
            allocation: '',
          },

所以我希望第 2 列为红色 (qualified=false)，第 3 列为绿色 (qualified=true)。

显然有更多的行，同样适用，也会有更多的列。

非常感谢帮助。

Answer 1

您可以尝试使用允许您创建自定义行的 item 插槽 - 这意味着您将能够应用条件类.

在此处查看我使用 Vuetify 示例的示例 data-set：https://codepen.io/ianteoyy-the-flexboxer/pen/JjOxjMQ

Vuetify data-table 单元格着色

Vuetify data-table cell coloring

vuetify.js