在 vuetify 数据 table 列上应用 css class 格式的最佳方法

Question

我有 Vuetify 的动态变化数据 v-data-table:

 <v-data-table
      :headers="table_headers"
      :items="table_content"
    >
    </v-data-table>

在 table_headers 中，我可以添加“class”，以便它可用于在 header 上应用自定义 css 格式：

  table_headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
            class: 'section-dessert'
          },
          { text: 'Calories', value: 'calories', class: 'section-calories' },
    
        ],

然而这只会影响 headers。所以我的问题是，是否有可能，或者将我保留在 table_headers 中的 class 也应用于所有行（每列）的最佳方法是什么。

因此，当我为给定 class 编写 css 时，它会同时影响 header 和给定列的所有行。

编辑：所以本质上我想设计整列的样式（基于列），如下所示： Can I color table columns using CSS without coloring individual cells? 然而，对于 headers 和 table 项目的动态数据（并且由于 vuetify 没有工作 colgroup，所以我不确定如何在这里做这样的事情）

Answer 1

你必须使用 body 槽来实现那种定制，见下文：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    table_headers: [{
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
        class: 'section-dessert'
      },
      {
        text: 'Calories',
        value: 'calories',
        class: 'section-calories'
      },

    ],
    table_content: [{
        name: "Some dessert",
        calories: 100
      },
      {
        name: "Some dessert2",
        calories: 200
      },
      {
        name: "Some dessert3",
        calories: 300
      },
      {
        name: "Some dessert4",
        calories: 400
      }
    ]
  }),

})

.section-dessert {
  color: red !important;
}

.section-calories {
  color: green !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<body>
  <div id="app">
    <v-app>
      <v-data-table :headers="table_headers" :items="table_content" hide-action hide-default-footer>
        <template v-slot:body="{ items }">
        <tbody>
        <tr v-for="item in items" >
          <td :class="table_headers[0].class">{{item.name}}</td>
          <td :class="table_headers[1].class">{{item.calories}}</td>
        </tr>
        </tbody>
      </template>
      </v-data-table>
    </v-app>
  </div>
</body>

在 vuetify 数据 table 列上应用 css class 格式的最佳方法

Best way to apply css class formatting on vuetify data table column

css

vue.js

vuetify.js