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

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 ''
    },
  },

这里有一个codepen示例：https://codepen.io/guizboule/pen/LYPyWMV? &editable=true&editors=101

如果您想要另一个解决方案，Vuetify 用芯片制作了一个示例：https://codepen.io/guizboule/pen/vYBmxwg ?&editable=true&editors=101