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?
Share Improve this question asked Aug 27, 2019 at 9:29 Mark Z.Mark Z. 2,44724 silver badges35 bronze badges1 Answer
Reset to default 5You 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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745318388a4622325.html
评论列表（0条）