admin管理员组

文章数量:1420112

What is the easiest way to highlight certain values in a column in a Vuetify Data Table (v-data-table ponent).

E.g. let's say in this first example here:

How to automatically style values in the Calories column that are greater than 300 in bold and red?

What is the easiest way to highlight certain values in a column in a Vuetify Data Table (v-data-table ponent).

E.g. let's say in this first example here: https://vuetifyjs./en/ponents/data-tables

How to automatically style values in the Calories column that are greater than 300 in bold and red?

  • javascript
  • css
  • typescript
  • vuejs2
  • vuetify.js
Share Improve this question asked Aug 27, 2019 at 9:29 Mark Z.Mark Z. 2,44724 silver badges35 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

You can do something like that :

    <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>

Then, in your script you can add a method "getStyle" that automatically style the values.

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

Here a codepen example : https://codepen.io/guizboule/pen/LYPyWMV?&editable=true&editors=101

In you want another solution, Vuetify made an example with chips : https://codepen.io/guizboule/pen/vYBmxwg?&editable=true&editors=101

本文标签：

版权声明：本文标题：javascript - Vuetify Data Table (v-data-table) - how to conditionally style values in certain columns - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745318388a2653259.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。