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

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

如果你想要另一种解决方案，Vuetify 用芯片做了一个例子:https://codepen.io/guizboule/pen/vYBmxwg?&editable=true&editors=101