Vuetify，v-data-table标题如何仅在箭头图标单击上排序而不是在项目名称上排序（由v-text-field替换）

Question

我希望通过文本搜索过滤我的标题项，因此我用 v-text-field 替换了我的标题项。所以标签就是占位符。

问题是，当我单击 v-text-field 时，它会按升序或降序排序。我希望仅在单击箭头时进行排序。

您知道如何做到这一点吗？

<v-data-table id="table" dense v-show="!$data.skeletonLoad" :page.sync="paginationData.page"
        :pageCount="paginationData.pageCount" :headers="head" fixed-header :items="dispItems"
        @pagination="paginationEvent" @page-count="paginationData.pageCount = $event" :options.sync="$data.listOptions"
        :server-items-length="totalItems" :loading="loading" class="elevation-0 mt-1 pt-1" :height="height"
        hide-default-footer>

 <template v-for="header in headers" v-slot:[`header.${header.value}`]>
    <v-text-field hide-details dense v-bind:key="header.value" v-model="$data[header.value]" id="custom-input"
          class="data-table-header-text pt-4" :label="header.text" placeholder="Recherche" />
</template>

Answer 1

我尝试将这些属性放入我的 v-data-table 组件中：

<v-data-table :sort-key="sortKey" :sort-desc="sortDesc" @click:header="toggleSort">

我的图标：

 <v-icon @click="toggleSort(header)" small :key="header.text"> {{ sortDesc ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>

我的方法：

methods: { toggleSort(headers) {
console.log('header', headers);
if (this.sortKey === headers.value) {
    this.sortDesc = !this.sortDesc;
    console.log('Sort order toggled:', this.sortDesc ? 'descending' : 'ascending');
  } else {
    this.sortKey = headers.value;
    this.sortDesc = false;
    console.log('Sort key changed:', this.sortKey);
  }
},

但我错过了一些东西。购买 vuetify 时似乎无法识别或使用 sort-desc 属性。