Vuetify 数据表标题自定义 - “隐藏默认标题”删除了排序功能

Question

当向 v-data-table 添加“hide-default-header”时，我注意到所有列的排序功能都被删除了。我想保留该功能，有没有一种简单的方法来重新包含排序？

这很棘手，因为我也在尝试add an additional icon with search features next to it，因此需要在标题中使用自定义模板。

在下面的代码中，第一列尝试使用排序功能无济于事。任何帮助将不胜感激。

    <v-data-table
            @click:row="rowClick"
            :headers="headers"
            :items="arrangedList" 
            :search="search"
            :items-per-page="10"
            class="outlined elevation-0"
            hide-default-header
            >
            <template>
<thead>
    <tr>
        <th :class="[
                        'column sortable',
                        pagination.descending ? 'desc' : 'asc',
                        headers[0].value === pagination.sortBy
                        ? 'active'
                        : '',
                        ]">
            <!-- Foo1 -->

            {{ headers[0].text }}

            <template>
                <v-btn :ripple="false" x-small icon>
                    <v-icon @click="changeSort(headers[0].value)" color="grey darken-1">fa-arrow-up</v-icon>
                </v-btn>
            </template>

            <v-menu attach="#menuAnchor" :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">

                <template v-slot:activator="{ on }" id="menuAnchor">
                    <v-btn :ripple="false" x-small icon v-on="on">
                        <v-icon color="grey darken-1">mdi-filter-outline</v-icon>
                    </v-btn>
                </template>

                <v-card class="gridfilter-card">
                    <v-list-item class="gridfilter-list-item">
                        <v-list-item-content class="gridfilter-list-item-content">
                            <v-text-field v-model="filterCandyValue" label="Enter Candy #" :clearable="true"></v-text-field>
                        </v-list-item-content>
                    </v-list-item>
                    <v-card-actions class="gridfilter-card__actions">
                        <v-spacer></v-spacer>
                        <button type="button" class="btn btn-primary" @click="onCandyFilterApply()">
                            <i class="fa fa-floppy-o"></i>
                            &nbsp;Apply
                        </button>
                    </v-card-actions>
                </v-card>
            </v-menu>
        </th>

        <!-- Foo2 -->
        <th>
            <v-menu :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">
                <template v-slot:activator="{ on }" id="menuAnchor1">
                    <span v-on="on">{{ headers[1].text }}</span>
                    <v-btn :ripple="false" x-small icon v-on="on">
                        <v-icon color="grey darken-1">mdi-filter-outline</v-icon>
                    </v-btn>
                </template>
                <v-card class="gridfilter-card">
                    <v-list-item class="gridfilter-list-item">
                        <v-list-item-content class="gridfilter-list-item-content">
                            <v-text-field label="Enter Foo2 #" :clearable="true"></v-text-field>
                        </v-list-item-content>
                    </v-list-item>
                    <v-card-actions class="gridfilter-card__actions">
                        <v-spacer></v-spacer>

                        <button type="button" class="btn btn-primary" @click="onFilterApply()">
                            <i class="fa fa-floppy-o"></i>
                            &nbsp;Apply
                        </button>
                    </v-card-actions>
                </v-card>
            </v-menu>
        </th>
    </tr>

    <template slot="items" slot-scope="props">
        <tr :active="props.selected" @click="props.selected = !props.selected">
            <td class="text-xs-right">{{ props.item.Foo1 }}</td>
            <td class="text-xs-right">{{ props.item.Foo2 }}</td>
        </tr>
    </template>

</thead>
</template>

            </v-data-table>

附：我使用此页面作为设置表格的起点：https://codepen.io/mikecole/pen/zLNKbG

Answer 1

看起来您想删除标题行，但您仍想保留排序。 因此，无需添加 hide-default-header 选项并将标题文本值保留为空字符串，您可以保留排序功能。

HTML

<v-data-table
    @click:row="rowClick"
    :headers="headers"
    :items="arrangedList" 
    :search="search"
    :items-per-page="10"
    class="outlined elevation-0"
    >
JS

headers: [
    {
      text: '',align: 'left', value: 'name'
    },
    { text: '', value: 'calories' },
    .
    .
    ],