Vuetify DataTable点击表头输入框触发排序的原因及解决方法

问题原因 #

Vuetify DataTable 的表头默认绑定了排序触发的点击事件，点击输入框时，点击事件会向上冒泡到表头容器，因此会同步触发排序逻辑。外层添加普通 div 不会默认阻止事件冒泡，所以无法解决该问题。

解决方案 #

给插槽内的 v-text-field 添加 @click.stop 修饰符，阻断点击事件向上冒泡即可，修改后的代码如下：

<template v-for="(header, i)  in columns" v-slot:[`header.${header.value}`]="{  }"> 
  {{ header.text }}
  <v-text-field :key="i"
    v-model="multiSearch[header.value]"
    class="pa"
    type="text"
    :placeholder="header.value"
    prepend-inner-icon="mdi-magnify"
    @click.stop
  ></v-text-field>
</template>

@click.stop 是 Vue 内置的事件修饰符，作用就是立即停止当前点击事件的冒泡传播，不会影响输入框本身的正常输入功能。

内容的提问来源于stack exchange，提问作者Boomerang20thCentury