? ? ? ?問題出在?Element UI 的?el-table?組件?全選功能上，這是一個常見的無障礙（a11y）問題。這個錯誤提示與網頁 accessibility（無障礙訪問）相關，涉及?aria-hidden?屬性的不當使用。

問題原因分析

1.?Element UI 全選功能的結構問題

• el-table?的全選功能通常由表頭中的一個復選框觸發，其結構可能類似：

  <el-table><el-table-column type="selection"></el-table-column> <!-- 全選/單選列 -->
  </el-table>
  

• 當你點擊全選時，組件內部可能錯誤地將?aria-hidden?應用于包含復選框的元素，導致：
  • 復選框（可聚焦元素）被?aria-hidden?隱藏。
  • 輔助技術（如屏幕閱讀器）無法感知焦點變化。

2.?Vue 組件渲染與 ARIA 沖突

• Element UI 是 Vue 組件庫，動態渲染時可能錯誤處理 ARIA 屬性。
• 例如，某些狀態下（如全選后），組件可能添加了?aria-hidden="true"?到不該添加的元素上。

臨時解決方案（生產環境快速修復）

使用指令強制修改 DOM

• 創建自定義指令，在組件渲染后移除錯誤的?aria-hidden：

  javascript

  // main.js
  Vue.directive('fix-aria-hidden', {inserted(el) {const checkboxes = el.querySelectorAll('input[type="checkbox"]');checkboxes.forEach(checkbox => {if (checkbox.closest('[aria-hidden="true"]')) {checkbox.closest('[aria-hidden="true"]').removeAttribute('aria-hidden');}});}
  });
  

  vue

  <!-- 使用指令 -->
  <el-table v-fix-aria-hidden><!-- 表格內容 -->
  </el-table>
  

四、驗證修復效果

總結

• 核心問題：Element UI 的?el-table?全選功能在某些場景下錯誤應用?aria-hidden?導致焦點沖突。
• 推薦方案：優先升級組件版本，若問題仍存在則通過自定義表頭或 CSS 修復。
• 長期建議：向 Element UI 官方提交 issue，推動修復原生組件的無障礙問題。