Vue、Vuetify表格标题加粗

xfb7svmp 于 2023-04-12 发布在 Vue.js

关注(0)|答案(2)|浏览(351)

我使用Vue和Vuetify来生成一个表，我想把表的标题加粗。因此，我想通过一个类的标题和自定义的CSS标题。尽管事实上，当我检查页面（F12-〉inspector）在头上我的自定义类已经通过了，但它不做我想做的事情，我觉得代码被覆盖了。你能帮帮忙吗
HTML：

<v-data-table
                  :headers="headers"
                  :items="myDataPSUTwo"
                  :search="search"
                ></v-data-table>

脚本：

data() {
    return {
      search: "",
      headers: [
        {
          text: "Name",
          align: "center",
          filterable: true,
          value: "name",
          class:"header-of-chart"
        },
        { text: "Value", value: "value" },
        { text: "Unit", value: "units" },
      ],
    };
  },

CSS：

<style scoped>
.header-of-chart {
  font-weight: bold;
}

</style

vue.js

来源：https://stackoverflow.com/questions/71704823/vue-vuetify-table-make-headers-bold

2条答案

按热度按时间

tkclm6bt1#

v-data-table有一个header插槽。你可以用它来修改header的样式。

<template>
    <div id="app">
        <v-app id="inspire">
            <v-data-table
                :headers="headers"
                :items="desserts"
                :sort-by="['calories', 'fat']"
                :sort-desc="[false, true]"
                multi-sort
                hide-default-header
                class="elevation-1"
                >
                <template v-slot:header="{ props }">
                    <th v-for="head in props.headers">{{ head.text.toUpperCase() }}</th>
                </template>
            </v-data-table>
        </v-app>
    </div>
</template>

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
        return {
            headers: [
                {
                    text: 'Dessert (100g serving)',
                    align: 'start',
                    sortable: false,
                    value: 'name',
                },
                { text: 'Calories', value: 'calories' },
                { text: 'Fat (g)', value: 'fat' },
                { text: 'Carbs (g)', value: 'carbs' },
                { text: 'Protein (g)', value: 'protein' },
                { text: 'Iron (%)', value: 'iron' },
            ],
            desserts: [
                {
                    name: 'Frozen Yogurt',
                    calories: 200,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    iron: '1%',
                }
            ],
        }
    },
})

赞(0）回复(0）举报 2023-04-12

ie3xauqp2#

v-data-table已有粗体标题文本，因此不会产生任何影响。是否要增大字体大小？可以如下使用**：**

.header-of-chart {
  font-size: 25px !important;
}

赞(0）回复(0）举报 2023-04-12

我来回答

Vue、Vuetify表格标题加粗

2条答案

相关问题

热门标签

最新问答