Vuetify v-data-table：仅点击箭头图标触发排序，屏蔽输入框排序触发

问题原因 #

默认情况下，v-data-table的表头单元格（<th>）绑定了排序触发的点击事件，当点击单元格内的v-text-field时，点击事件会向上冒泡到<th>元素，从而意外触发排序逻辑。

最简单的解决方案 #

在v-text-field上添加@click.stop修饰符，阻止点击事件冒泡到父元素，这样点击输入框时就不会触发表头的排序操作：

<template v-for="header in headers" v-slot:[`header.${header.value}`]>
  <v-text-field 
    hide-details 
    dense 
    :key="header.value" 
    v-model="$data[header.value]" 
    id="custom-input"
    class="data-table-header-text pt-4" 
    :label="header.text" 
    placeholder="Recherche"
    @click.stop  <!-- 阻止事件冒泡 -->
  />
</template>

进阶方案（保留表头空白区排序能力） #

如果希望除了输入框之外，表头的空白区域仍能触发排序，可以手动拆分输入框和排序图标，仅让图标绑定排序事件：

模板部分

<template v-for="header in headers" v-slot:[`header.${header.value}`]>
  <div class="d-flex align-center w-100">
    <v-text-field 
      hide-details 
      dense 
      :key="header.value" 
      v-model="$data[header.value]" 
      id="custom-input"
      class="data-table-header-text pt-4 flex-grow-1" 
      :label="header.text" 
      placeholder="Recherche"
    />
    <!-- 手动渲染排序图标并绑定排序逻辑 -->
    <v-icon 
      v-if="header.sortable"
      @click="toggleSort(header.value)"
      class="ml-2 cursor-pointer"
    >
      {{ header.sort === 'asc' ? 'mdi-arrow-up' : header.sort === 'desc' ? 'mdi-arrow-down' : 'mdi-unfold-more' }}
    </v-icon>
  </div>
</template>

脚本部分

methods: {
  toggleSort(field) {
    this.headers = this.headers.map(header => {
      if (header.value !== field) return { ...header, sort: '' }
      return {
        ...header,
        sort: header.sort === 'asc' ? 'desc' : header.sort === 'desc' ? '' : 'asc'
      }
    })
  }
}

内容的提问来源于stack exchange，提问作者Raphaël Chemouni