如何在Vuetify 3 DataTable表头添加Tooltip且保留排序功能？

要在Vuetify 3 DataTable的表头添加Tooltip同时不重新实现排序功能，核心是利用组件内置的header插槽，复用原生表头的排序逻辑，仅在外部包裹Tooltip组件。

实现步骤 #

1. 定义表头数据时添加tooltip字段
   在表头数组中为需要提示的列添加自定义tooltip字段，存储提示文本：

   const headers = [
     {
       title: '用户ID',
       align: 'start',
       sortable: true,
       key: 'id',
       tooltip: '用户的唯一标识ID'
     },
     {
       title: '用户名',
       align: 'start',
       sortable: true,
       key: 'name',
       tooltip: '用户的登录名称'
     },
     {
       title: '注册时间',
       align: 'start',
       sortable: true,
       key: 'registerTime'
       // 无tooltip字段则不显示提示
     }
   ]
   

2. 通过header插槽自定义表头
   在v-data-table中使用#header插槽，将原生表头元素包裹在v-tooltip内，同时保留原生的排序事件与样式：

   <v-data-table
     :headers="headers"
     :items="items"
   >
     <template #header="{ header, props }">
       <!-- 对有tooltip的列添加提示组件 -->
       <template v-if="header.tooltip">
         <v-tooltip bottom>
           <template #activator="{ props: tooltipProps }">
             <!-- 绑定原生表头的props与tooltip的激活事件 -->
             <th v-bind="props" v-on="tooltipProps">
               <v-icon v-if="header.sortable" :icon="header.sortIcon"></v-icon>
               {{ header.title }}
             </th>
           </template>
           {{ header.tooltip }}
         </v-tooltip>
       </template>
       <!-- 无tooltip的列直接渲染原生表头 -->
       <th v-else v-bind="props">
         <v-icon v-if="header.sortable" :icon="header.sortIcon"></v-icon>
         {{ header.title }}
       </th>
     </template>
   </v-data-table>
   

关键说明 #

• 复用props参数：props包含了原生表头的排序事件、样式绑定等信息，直接绑定到<th>上可完整保留排序功能。
• 激活器事件绑定：通过v-on="tooltipProps"将Tooltip的hover触发事件绑定到表头元素上，确保鼠标悬停时显示提示。
• 条件渲染：针对无tooltip的列直接渲染原生表头，避免不必要的DOM嵌套。

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