在 vuetify 中为 v-data-table 的第一行添加样式答案

【问题标题】：Add style to first row of v-data-table in vuetify在 vuetify 中为 v-data-table 的第一行添加样式
【发布时间】：2020-10-19 23:46:04
【问题描述】：

我使用 vuetify 数据表组件定义了如下表。我在这里面临的问题是我无法弄清楚如何将表格的第一行设为粗体。第一个项目记录为粗体。请帮助找到解决方案。我正在使用 vuetify 1.0.5。

   <v-data-table>
    :headers="headers"
    :items="agents"
    hide-actions
    class="agent-table"
  >
  <template slot="items" slot-scope="props">
    <td>{{ props.item.name }}</td>
    <td>{{ props.item.address }}</td>
  </template>
  </v-data-table>

【问题讨论】：

你能用数据创建一个工作示例/sn-p 吗？

标签： css vue.js vuetify.js

【解决方案1】：

使用 v-if 搜索第一行索引或关于第一行的独特内容并将其绑定到样式或类。这里列出了更多的方法reference

<template slot="items" slot-scope="props">
  <tr v-if="unique condition" v-bind:style="{ 'font-weight': 'bold'}>
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.address }}</td>
  </tr>
  <tr v-else>
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.address }}</td>     
  </tr>
 </template>

【讨论】：

【解决方案2】：

另一种可以使用的方法是使用计算属性将索引插入数据中的每个元素。如果您需要稍后更新表，因为计算属性会自动更新，这会很有用。

例如，假设项目数据存储在项目中。

data() {
  return {
    items: [{
      fruit_name: 'Banana',
      calories: 30
    }, {
      fruit_name: 'Apples',
      calories: 40
    }]
  }
}

在这里，每个元素都是自身加上附加属性，即索引。元素添加是使用扩展运算符实现的。使用 map 函数的函数式编程风格将所有映射的元素组合成一个数组。

computed: {
  itemsWithIndex: () {
    return this.items.map(
      (items, index) => ({
        ...items,
        index: index + 1
      }))
  }
}

注意：index: index+1 将使编号从 1 开始。

然后，在v-data-table需要的headers数据里面，可以参考索引项数据进行编号。

data() {
  return {
    items: {
      ...
    },
    headers: [{
        text: 'Num',
        value: 'index',
      },
      {
        text: 'Fruit Name',
        value: 'fruit_name',
      },
      {
        text: 'Calories',
        value: 'calories',
      }
    ]
  }
}

Codepen 示例：https://codepen.io/72ridwan/pen/NWPMxXp

Reference

【讨论】：

【解决方案3】：

<template slot="items" slot-scope="props">
 <tr v-bind:class="getClass(props.item.name)">
  <td>{{ props.item.name }}</td>
  <td>{{ props.item.address }}</td>
 </tr>
</template>

<script>
  export default {
   methods: {
      getClass: function (name) {
        if (name == 'XYZ') return 'header2';
      },
    }
  }
</script>

<style>
 .header2 {
   // added style here
 }
<style>

【讨论】：