槽头 vuetify 2.0

Question

早上好，我正在修改vuetify.js中的一个数据table的slot header，添加一个tooltip，一切顺利，但是asc和desc的箭头没有显示，我想知道我做错了什么。

<template  v-slot:header="{ props: { headers } }">
    <thead>
        <tr>
            <th 
                style="white-space: nowrap"
                :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                @click="changeSort(header.value)"
                v-for="element in headers" 
                :key="element.text">
                <v-tooltip top>
                    <template v-slot:activator="{ on }">
                        <span v-on="on">{{element.text}}</span>
                    </template>
                    <span>{{element.text}}</span>
                </v-tooltip>
            </th>
        </tr>
    </thead>
</template>

Answer 1

如 documentation、

中所述

It is important to note some slot (eg: item/body/header) will completely takes over the internal rendering of the component which will require you to re-implement functionalities such as selection and expansion.

但是你可以customize the default header

You can use the dynamic slots header. to customize only certain columns. is the name of the value property in the corresponding header item sent to headers.

修改文档第二部分中的代码笔，您可以看到如何使用 dynamic slot names 为每个 header 添加工具提示。这里我有前 3 列的工具提示，其余列只有默认文本，但是为 headerTooltips 中的所有内容填充工具提示文本将为所有 header 生成工具提示。

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
        <v-tooltip v-if="headerTooltips[header.value]" bottom :key="header.value">
          <template v-slot:activator="{ on }">
            <span v-on="on">{{ header.text }}</span>
          </template>
          <span>{{ headerTooltips[header.value] }}</span>
        </v-tooltip>
        <span v-else>{{ header.text }}<span>
      </template>
    </v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        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' },
    ],
    headerTooltips: {
      name: 'Name tooltip',
      calories: 'Calories tooltip',
      fat: 'Fat tooltip'
    },
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
    ],
  }),
})

这是 Codepen：https://codepen.io/keeganwitt/pen/ExVVyqa

槽头 vuetify 2.0

Slot headers vuetify 2.0

datatable

header

slot

vue.js

vuetify.js