Vue 3表格组件@click事件与Tailwind hover在Safari中失效求助

核心原因分析 #

问题根源是**sticky定位的thead遮挡了tbody区域**：

• Safari中sticky元素默认层级（z-index:auto）会覆盖下方的tbody，导致鼠标无法直接触达tbody内的行，既触发不了click事件，也无法触发hover样式
• 元素选择工具选不中tbody，也是因为thead在视觉层级上完全覆盖了它

具体修复步骤 #

1. 调整thead层级避免遮挡 #

给thead添加z-10类，确保固定头部的同时不遮挡下方交互区域：

<thead class="sticky top-0 z-10 rounded bg-gray-100 shadow-sm">

2. 强制开启行元素的事件响应 #

如果上述修改后仍有问题，给tbody内的tr添加pointer-events:auto，确保事件能正常触达：

<tr
  v-for="(row, index) in data"
  :key="index"
  class="border-b last:border-0 pointer-events-auto"
  :class="{ 'cursor-pointer hover:bg-gray-100': areRowsClickable }"
  @click="handleRowClick(row)"
>

3. 优化表格布局兼容性 #

Safari对表格h-full属性的处理存在差异，可添加Tailwind的table-fixed类固定布局，避免高度计算异常：

<table class="h-full w-full table-fixed">

验证效果 #

修改后测试以下场景：

• 能否用元素选择工具选中tbody
• 行的hover样式是否正常触发
• 点击行能否触发handleRowClick事件

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