Lightning Datatable悬浮弹窗触发整行展开问题求助

我希望在Lightning Datatable的姓名字段上hover时展示用户信息弹窗，但当前触发的是整行展开，不符合需求。以下是我使用自定义类型Datatable的相关代码：

父组件中使用自定义Datatable的代码 #

<c-custom-datatable key-field="Id" data={teacherAccts} columns={teacherColumns} hide-checkbox-column onrowaction={rowAction} oneditaccount={handleEdit}></c-custom-datatable>

父组件JS列配置片段 #

const teacherColumns = [
    { label: 'Teacher Name', fieldName: 'teacherNameURL', type: 'customUserData', typeAttributes: { userId : { fieldName: 'teacherId' }, userName : {fieldName: 'teachername'} } },
    // 其他列配置...
]

自定义类型Datatable代码 #

import LightningDatatable from "lightning/datatable";
import customUserData from './customUserData.html';

export default class CustomTypeDatatable extends LightningDatatable {
  static customTypes = {    
    customUserData: {
      template: customUserData,
      standardCellLayout: true,
      typeAttributes: ["userId", "userName"]
    }
  };
}

customUserData.html（自定义类型模板） #

<template>
    <c-custom-user-data user-id={typeAttributes.userId} user-name={typeAttributes.userName}></c-custom-user-data>
</template>

CustomUserData组件代码 #

CustomUserData.html #

<template>
    <div >
        <a onmouseover={showData} onmouseout={hideData} data-id={userId} href="#">{userName}</a>
    </div>
    <div>
      <c-hover-pop-up topmargin={top} leftmarginn={left} myuser={hoverUserId}></c-hover-pop-up>    
    </div>
</template>

CustomUserData.js #

import { LightningElement, api } from 'lwc';

export default class CustomUserData extends LightningElement {
    
    @api hoverUserId;
    @api top;
    @api left;

    showData(event){
        this.hoverUserId = event.currentTarget.dataset.id;       
        this.left = event.clientX;
        this.top=event.clientY;    
    }
    hideData(event){
        this.hoverUserId = "";
    }
 }

HoverPopUp组件代码 #

HoverPopUp.html #

<template>
    <div>
        <template if:true={userId} >
        <div >
            <section class="slds-popover slds-popover_panel slds-nubbin_top-left" role="dialog" style={boxClass}>              
              <div class="slds-popover__body">
                <lightning-record-form record-id={userId} object-api-name="User" layout-type="Compact" columns="1" mode="readonly"> </lightning-record-form>
              </div>
            </section>
          </div>
          </template>
      </div>  
</template>

HoverPopUp.js #

import { LightningElement,api } from 'lwc';

export default class HoverPopUp extends LightningElement {
    @api userId;
    @api top = 50;
    @api left = 50;

    @api
    get myuser(){
        return this.userId;
    }

    set myuser(value) {
        this.userId = value;
        console.log('this userid ', this.userId);
    }

    @api
    get topmargin(){
        return this.top;
    }

    set topmargin(value) {
        this.top = value;
        console.log('top ', this.top);
    }

    @api
    get leftmargin(){
        return this.left;
    }

    set leftmargin(value) {
        this.left = value;
        console.log('left ', this.left);
    }

    get boxClass() { 
        return `background-color:white; top:${this.top +280}px; left:${this.left}px`;
      }
}

现象说明 #

• 初始状态：表格行高度正常
• Hover姓名字段时：整行被撑开展开，而非仅显示悬浮弹窗

整行展开的核心原因是悬浮弹窗的DOM元素未脱离表格行的布局流，导致行高度被强制撑开，同时可能存在事件冒泡触发表格行默认hover行为的问题。以下是修复步骤：

1. 让弹窗脱离文档流 #

修改HoverPopUp组件的外层容器，添加绝对定位和层级，避免占用表格行空间：

<template>
    <!-- 绝对定位脱离文档流，z-index确保弹窗在最上层 -->
    <div style="position: absolute; z-index: 9999; pointer-events: none;">
        <template if:true={userId} >
        <div style="pointer-events: auto;">
            <section class="slds-popover slds-popover_panel slds-nubbin_top-left" role="dialog" style={boxClass}>              
              <div class="slds-popover__body">
                <lightning-record-form record-id={userId} object-api-name="User" layout-type="Compact" columns="1" mode="readonly"> </lightning-record-form>
              </div>
            </section>
          </div>
          </template>
      </div>  
</template>

2. 修正弹窗定位参照 #

给CustomUserData中的弹窗容器添加相对定位，确保弹窗位置基于单元格计算：

<template>
    <div>
        <a onmouseover={showData} onmouseout={hideData} data-id={userId} href="#">{userName}</a>
    </div>
    <!-- 父容器设为相对定位，作为弹窗的定位基准 -->
    <div style="position: relative;">
      <!-- 修正拼写错误：leftmarginn → leftmargin -->
      <c-hover-pop-up topmargin={top} leftmargin={left} myuser={hoverUserId}></c-hover-pop-up>    
    </div>
</template>

3. 调整弹窗位置偏移 #

原代码中top+280px的偏移量过大，调整为鼠标附近的合理位置：

// HoverPopUp.js
get boxClass() { 
    return `background-color:white; top:${this.top + 20}px; left:${this.left + 20}px; position: absolute;`;
}

4. 阻止事件冒泡（可选） #

如果hover事件仍触发行展开，在CustomUserData的事件方法中阻止冒泡：

// CustomUserData.js
showData(event){
    event.stopPropagation(); // 阻止事件传递到表格行
    this.hoverUserId = event.currentTarget.dataset.id;       
    this.left = event.clientX;
    this.top=event.clientY;    
}
hideData(event){
    event.stopPropagation();
    this.hoverUserId = "";
}

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