Question

早上好，我正在vuetify.js中修改数据表的插槽标题以添加工具提示，这一切都做得很好，但是没有显示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

所述

请注意，某些插槽（例如：ref = Database.database().reference().child(dftNode) ref.observe(DataEventType.value, with: { (snapshot) in // need to consider the workshop is still empty or not? if snapshot.childrenCount > 0 { // get defect list for defect in snapshot.children.allObjects as! [DataSnapshot] { let defectObj = defect.value as? [String: AnyObject] let defectId = defect.key let defectName = defectObj?["name"] self.tmpDisplayDefectIdList.append(defectId) self.tmpDisplayDefectNameList.append(defectName as! String) self.tmpDefectSelected.append(0) } } }) selectedDft = Database.database().reference().child(node) selectedDft.queryOrderedByKey().queryEqual(toValue: passInCompId).observe(.childAdded, with: { (snapshot) in for child in snapshot.children { let snap = child as! DataSnapshot let tmpkey = snap.key as String? self.selectedDftId.append(tmpkey!) } self.prepareSelectedDftList() }) / item / body）将完全取代组件的内部呈现，这将需要您重新实现功能，这一点很重要例如选择和扩展。

但是您可以customize the default header

您可以使用动态插槽标头。仅自定义某些列。是发送到标头的相应标头项目中value属性的名称。

在文档的第二部分中修改代码笔，您可以看到如何使用dynamic slot names为每个标头添加工具提示。在这里，我为前三列提供了一个工具提示，而对于其余列，只有默认文本，但是在header中填充所有工具提示文本将为所有标题生成工具提示。

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>

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

插槽标头vuetify 2.0

1 个答案: