vue.js - 槽头 vuetify 2.0

Question

早上好，我正在修改vuetify.js中的一个数据表的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 为每个标题添加工具提示。 .这里我有前 3 列的工具提示，其余列只有默认文本，但是在 headerTooltips 中为所有填充工具提示文本将为所有标题生成工具提示。

<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