Angular Material展开面板内mat-table无法高亮选中的问题咨询

以下是几个可行的排查和解决方向：

• 强制开启表格内容的选中权限
  Angular Material的mat-expansion-panel可能默认给内容区域设置了user-select: none，导致表格文本无法选中。可以通过自定义CSS覆盖这一设置：

  .mat-expansion-panel-content table,
  .mat-expansion-panel-content table td,
  .mat-expansion-panel-content table th {
    user-select: text !important;
  }
  

  直接给表格及其单元格指定允许文本选择的样式，!important用于确保优先级高于Material的默认样式。

• 检查mat-table的交互逻辑
  如果给mat-table的行（mat-row）添加了点击事件，可能存在阻止文本选择的代码（比如event.preventDefault()或event.stopPropagation()）。排查相关事件处理代码，移除不必要的默认行为阻止，或者调整逻辑避免干扰文本选择。

• 排查动画或层级冲突
  mat-expansion-panel的展开动画可能引发渲染层级问题，干扰文本选择。可以先临时禁用面板动画测试：

  <mat-expansion-panel [@.disabled]="true">
    <!-- 你的mat-table代码 -->
  </mat-expansion-panel>
  

  如果禁用动画后恢复正常，说明是动画导致的冲突。可以给表格添加更高的层级来规避：

  .mat-expansion-panel-content table {
    position: relative;
    z-index: 100;
  }
  

• 排查全局样式冲突
  打开浏览器开发者工具（F12），选中表格单元格，在Styles面板查看user-select属性的来源，确认是否有全局CSS不小心给.expansion-panel下的元素设置了user-select: none，找到后修改对应样式即可。

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