Question

在Vuetify数据表（v-data-table组件）的列中突出显示某些值的最简单方法是什么。

例如让我们在这里的第一个示例中说：https://vuetifyjs.com/en/components/data-tables

如何自动为“卡路里”列中的大于300的粗体和红色样式设置样式？

Answer 1

您可以执行以下操作：

    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.calories="{ item }">
        <div :class="getStyle(item.calories)">{{ item.calories }}</div>
      </template>
    </v-data-table>

然后，您可以在脚本中添加自动设置值样式的方法“ getStyle”。

methods: {
    getStyle (calories) {
      if (calories > 300) return 'red--text font-weight-bold'
      else return ''
    },
  },

下面是一个代码笔示例：https://codepen.io/guizboule/pen/LYPyWMV?&editable=true&editors=101

在您需要其他解决方案时，Vuetify举了一个使用芯片的示例：https://codepen.io/guizboule/pen/vYBmxwg?&editable=true&editors=101

Vuetify数据表（v-data-table）-如何在某些列中有条件地设置值的样式

1 个答案: