为 Vuetify 数据表中的单个行设置样式 [英] styling individual rows in a Vuetify data table

问题描述

我可以对数据表中的特定行应用不同的样式吗?

这是我的代码:

<template slot="items" slot-scope="props"><td><v-复选框基本的隐藏细节v-model="props.selected"></v-checkbox></td><td class="text-xs-left">{{ props.item.id }}</td><td class="text-xs-left">{{ props.item.apresentante }}</td></v-data-table>

例如，我想在 Id > 时应用一条红线.4

解决方案

您现在可以使用 vuetifys 数据表 item-class 属性:

new Vue({el: '#app',vuetify: 新的 Vuetify(),方法: {行类(项目){如果 (item.calories <200) {返回橙色"；//也可以返回多个类，例如 ["orange","disabled"]}}},数据 () {返回 {单选:假，选择:[]，headers: [{text: 'Dessert (100g serve)', value: 'name'},{文本:'卡路里'，值:'卡路里'}，],甜点:[{名称:'冷冻酸奶'，卡路里:159，}，{名称:'冰淇淋三明治'，卡路里:237，}，{名称:'Eclair'，卡路里:262，}，{名称:'纸杯蛋糕'，卡路里:305，}，],}},})

.orange {背景颜色:橙色；}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'><div id="应用程序"><v-app><v-数据表v-model="选择":headers="headers":items="甜点":item-class="row_classes"类=海拔-1"></v-data-table></v-app>

<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script><script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>

Can I apply different styling for a specific row in a data table?

This is my code:

<v-data-table
          :headers="headers"
          :items="items"
          v-model="selected"
          :search="search"
          :no-data-text="mensagem"
          select-all
          :rows-per-page-text="linhasPorPagina">
          <template slot="items" slot-scope="props">
            <td>
              <v-checkbox
                primary
                hide-details
                v-model="props.selected"
              ></v-checkbox>
            </td>
            <td class="text-xs-left">{{ props.item.id }}</td>
            <td class="text-xs-left">{{ props.item.apresentante }}</td>    
        </v-data-table>

For example, I want to apply a red line when the Id > 4

解决方案

You can now use vuetifys data table item-class property:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    row_classes(item) {
        if (item.calories < 200) {
          return "orange"; //can also return multiple classes e.g ["orange","disabled"]
        } 
    }
  },
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [{text: 'Dessert (100g serving)', value: 'name'},
                { text: 'Calories', value: 'calories' },
      ],
      desserts: [{name: 'Frozen Yogurt',calories: 159,},
                 {name: 'Ice cream sandwich',calories: 237,},
                 {name: 'Eclair',calories: 262,},
                 {name: 'Cupcake',calories: 305,},
      ],
    }
  },
})

.orange {
  background-color: orange;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>

<div id="app">
  <v-app>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :item-class= "row_classes"                  
      class="elevation-1"
    >
    </v-data-table>
  </v-app>
</div>

<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>

这篇关于为 Vuetify 数据表中的单个行设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！