如何在 Vuetify 中设置数据表 td 的样式？答案

【问题标题】：How to style a data table td in Vuetify?如何在 Vuetify 中设置数据表 td 的样式？
【发布时间】：2022-08-16 20:03:54
【问题描述】：

下午好。我正在尝试使用“v-data-table”构建一个程式化的表格，但不习惯它。主要将样式放入第二个或第三个单元格（table、tr、td）。我找不到我的问题的解决方案。请帮帮我。谢谢。

你的问题似乎很模糊。你能分享你的代码吗？

标签： vuetify.js

【解决方案1】：

您可以使用item-class 属性来设置每一行的样式

提供的项目的属性，包含项目的行类或将项目作为参数并返回相应行的类的函数

它的工作原理如下：

它接受一个函数作为参数，根据行返回一个类。

如果您想根据项目返回特定类，请像这样使用它：

<template>
   <v-datad-table :item="items" :item-class="getMyClass"></v-data-table>
</template>

<script>
   methods: {
      getMyClass(item){
         // here define your logic
         if (item.value === 1) return "myFirstClass"
         else return "mySecondClass"
      }
   }
</script>

如果您想始终提供相同的课程，您可以只返回您想要提供的课程（请注意，这与使用css 对表格的 td 进行风格化相同）

<template>
   <v-data-table :items="items" :item-class="() => 'myClass'"></v-data-table>
</template>

在您的情况下，您可以使用计算属性向数据添加索引，并根据索引添加一个类

computed: {
   myItemsWithIndex(){
      retunr this.items.map((x, index) => {...x, index: index})
   }
}

methods: {
   getMyClass(item){
      if(item.index === 2 || item.index === 3) return "myClass"
   }
}

工作示例

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => {
    return {
      items: [
        {name: "foo"},
        {name: "bar"},
        {name: "baz"},
        {name: "qux"},
        {name: "quux"},
        {name: "corge"},
        {name: "grault"},
      ],
      headers: [{ text: 'Name', value: 'name'}],
    }
  },
  
  computed: {
    itemsWithIndex(){
      return this.items.map((item, index) => ({ ...item, index:index }))
    }
  },
  
  methods: {
    getMyClass(item){
      if(item.index === 2  || item.index === 3){
        return "myClass"
      } else return
    }
  }
})

.myClass {
  background: red
}

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css" />

<div id="app" data-app>
  <v-data-table :items="itemsWithIndex" :headers="headers" :item-class="getMyClass"></v-data-table>
</div>

【讨论】：

【解决方案2】：

我敢打赌，您想要实现的目标可以使用named slots 来完成请参阅文档中的this example。基本上，您在示例中看到的 template 标记将成为“在它之上”的任何节点（它实际上不是因为它取代了它，但你明白了这一点）。例如，对于数据表，<template #item="{ item }">... 代表表中的每个 <td>。然后，您可以使用解构的item 并对其应用一些逻辑来随意修改您的表。
如果它帮助您解决问题，请不要忘记投票/验证答案，如果您需要更多详细信息，请发表评论并欢迎使用 Stack！

【讨论】：

【解决方案3】：

也有可能使用 cellClass，它是标题的一部分。

图片来自https://vuetifyjs.com/en/api/v-data-table/#props

作为计算属性，我有：

headers() {
    return [
        { text: this.$t('Name'), align: 'left', sortable: true, value: 'name', cellClass:'select' },
        { text: 'CVR', sortable: false, value: 'cvrno' },
        { text: this.$t('Updated At'), sortable: false, value: 'updatedAt' }
    ]
},

并且通过 v-data-table 标签看起来像：

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="customerFiltered"
    :loading="loadingCustomers"
    :items-per-page="-1"
    selected-key="id"
    show-select
    hide-default-footer
    fixed-header
>

【讨论】：