如何使用 Vuetify 3 更改数据表的分隔符？

Question

我正在学习 Vue 和 Vuetify 3，我想设置数据表的样式，但我无法实现这一点。

我想弄清楚如何更改表格内容分隔符的颜色或背景，以及如何更改表格标题的背景。

谢谢！

https://codepen.io/Vinicius-Ribeiro-the-typescripter/pen/QWeWXoG

<v-data-table

  :headers="headers"

  :items="items"

  :items-per-page="3" 

  :pagination.sync="pagination"

  class="elevation-0 ma-0"

  style="max-height: 400px; overflow-y: auto;"

></v-data-table>

Answer 1

像这样的东西=> vuetify_playground_example，如果我理解正确的话。

<script setup>
  import { ref } from 'vue'

  const headers = [
    { title: 'Nome', value: 'name' },

    { title: 'Espécies', value: 'species' },

    { title: 'Dieta', value: 'diet' },

    { title: 'Habitat', value: 'habitat' },
  ]

  const items = [
    {
      name: 'African Elephant',

      species: 'Loxodonta africana',

      diet: 'Herbivore',

      habitat: 'Savanna, Forests',
    },

    {
      name: 'Bengal Tiger',

      species: 'Panthera tigris tigris',

      diet: 'Carnivore',

      habitat: 'Tropical Rainforest',
    },

    {
      name: 'Giant Panda',

      species: 'Ailuropoda melanoleuca',

      diet: 'Herbivore',

      habitat: 'Temperate Broadleaf Forest',
    },
  ]

  const pagination = ref({
    page: 1,

    rowsPerPage: 2,
  })
</script>

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="items"
      :items-per-page="3"
      :pagination.sync="pagination"
      class="myTable elevation-0 ma-0"
      style="max-height: 400px; overflow-y: auto"
    ></v-data-table>
  </v-container>
</template>

<style scoped>
  :deep(.myTable thead) {
    background-color: teal;
  }

  :deep(.v-theme--light) {
    --v-border-color: 198, 159;
  }

  :deep(.myTable .v-table__wrapper) {
    border-bottom: 1px solid rgba(198, 159, 0);
  }
</style>