Question

我可以在数据表中的确定行中应用diff样式

这是我的代码：

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

我想在Id＆gt; 4（样本）

时应用红线

Answer 1

您实际上可以将<td>元素包装在<tr>元素中。然后，您可以使用Vue样式绑定来确定是否要应用类。

<template>
  <tr v-bind:class="{'active-class-name': isActive(item)}">
    <td>Woo</td>
  </tr>
</template>

它使用tbody来渲染row (tr)块，其中包含应用的类名和包含在其中的子列。

Answer 2

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

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>

Answer 3

这是一个代码集，可以产生与您正在寻找的结果类似的结果。它使用Daniel上面评论中引用的样式绑定语法。

https://codepen.io/lshapz/pen/jxmgyx

如果您希望整行有红线（或者在我的示例中为红色背景），您需要将三个td包装在tr中。如果你只想在id单元格上，那么你可以添加

<td class="text-xs-left" :style="{backgroundColor: (props.item.id > 4 ? 'red' : 'transparent' ) }">
 {{ props.item.id }}
</td>

Answer 4

我也试图在vuetify数据表中设置行的样式，但以上答案并没有我需要的所有内容。 使用Vuetify v2

我想在满足特定条件时将一个类添加到行中。

<v-data-table  
   :headers="myHeaders"
   :items="myItems"
>
  <template v-slot:item="props">
    <tr :class="{'my-class': props.item.current > props.item.total}">
      <td>{{props.item.current}}</td>
      <td>{{props.item.total}}</td>
    </tr>
  </template>
</v-data-table>

...
// js portion of the component (computed prop)

myItems() {
    return [
      {
        current: 101,
        total: 100
      },
      {
        current: 45,
        total: 100
      }
    ]
  }

样式化数据表中的每一行

4 个答案: