fix(Table): fix default horizontal scroll behavior (#4904)

* fix(Table): fix default horizontal * fix(Table): fix default horizontal * fix(Table): fix default horizontal * chore: update common --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Jan 16, 2025 · 954db10 · 954db10
1 parent 3a90714
commit 954db10
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
@@ -176,6 +176,7 @@ export default defineComponent({
       clearHoverRow,
       addRowHoverKeyboardListener,
       removeRowHoverKeyboardListener,
+      tableRefTabIndex,
     } = useHoverKeyboardEvent(props, tableRef);
 
     watch(tableElmRef, () => {
@@ -394,6 +395,7 @@ export default defineComponent({
       horizontalScrollAffixRef,
       headerTopAffixRef,
       footerBottomAffixRef,
+      tableRefTabIndex,
     };
   },
 
@@ -714,7 +716,7 @@ export default defineComponent({
     return (
       <div
         ref="tableRef"
-        tabindex="0"
+        tabindex={this.tableRefTabIndex}
         class={this.dynamicBaseTableClasses}
         onFocus={this.onTableFocus}
         onBlur={this.onTableBlur}

diff --git a/src/table/hooks/useHoverKeyboardEvent.ts b/src/table/hooks/useHoverKeyboardEvent.ts
@@ -2,7 +2,16 @@ import { toRefs, Ref, ref, computed } from 'vue';
 import get from 'lodash/get';
 import { BaseTableProps } from '../interface';
 import { on, off } from '../../utils/dom';
-import { ALL_REG, ARROW_DOWN_REG, ARROW_UP_REG, CLEAR_REG, ESCAPE_REG, SPACE_REG } from '../../_common/js/common';
+import {
+  ALL_REG,
+  ARROW_DOWN_REG,
+  ARROW_UP_REG,
+  CLEAR_REG,
+  ESCAPE_REG,
+  SPACE_REG,
+  ARROW_LEFT_REG,
+  ARROW_RIGHT_REG,
+} from '../../_common/js/common';
 import { RowEventContext, TableRowData } from '../type';
 
 /**
@@ -13,6 +22,7 @@ export function useHoverKeyboardEvent(props: BaseTableProps, tableRef: Ref<HTMLD
   const { hover, data, activeRowType, keyboardRowHover, disableSpaceInactiveRow } = toRefs(props);
   const hoverRow = ref<string | number>();
   const currentHoverRowIndex = ref(-1);
+  const tableRefTabIndex = ref(0);
 
   // 单行高亮场景，不需要键盘悬浮效果
   const needKeyboardRowHover = computed(() => {
@@ -67,6 +77,13 @@ export function useHoverKeyboardEvent(props: BaseTableProps, tableRef: Ref<HTMLD
     } else if (CLEAR_REG.test(code) && !props.activeRowType) {
       props.onActiveRowAction?.({ action: 'clear', activeRowList: [] });
     }
+
+    // 用于支持键盘默认的左右滚动，左右滚动时重置为undefined，其他情况下为0，支持键盘操作
+    if (ARROW_LEFT_REG.test(code) || ARROW_RIGHT_REG.test(code)) {
+      tableRefTabIndex.value = undefined;
+    } else {
+      tableRefTabIndex.value = 0;
+    }
   };
 
   const addRowHoverKeyboardListener = () => {
@@ -83,6 +100,7 @@ export function useHoverKeyboardEvent(props: BaseTableProps, tableRef: Ref<HTMLD
     clearHoverRow,
     addRowHoverKeyboardListener,
     removeRowHoverKeyboardListener,
+    tableRefTabIndex,
   };
 }
 

diff --git a/src/table/hooks/useRowHighlight.ts b/src/table/hooks/useRowHighlight.ts
@@ -164,6 +164,7 @@ export function useRowHighlight(props: BaseTableProps, tableRef: Ref<HTMLDivElem
 
   const keyboardDownListener = (e: KeyboardEvent) => {
     const code = e.code || e.key?.trim();
+
     if (ARROW_DOWN_REG.test(code)) {
       e.preventDefault();
       const index = Math.min(data.value.length - 1, currentOperationRowIndex.value + 1);
+2 −2		style/web/components/image-viewer/_index.less
+1 −8		style/web/components/menu/_index.less