feat(table): scrollToElement By row key (#2643)

src/common.ts

@@ -115,3 +115,7 @@ export interface ScrollToElementParams {
   time?: number;
   behavior?: 'auto' | 'smooth';
 }
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key: string | number;
+}

src/table/_example/tree-select.vue

@@ -170,19 +170,32 @@ export default {
       MessagePlugin.success('获取成功，请打开控制台查看');
     },
 
+    // 虚拟滚动场景：滚动到指定行
     scrollToElement() {
       const { enhancedTableRef } = this.$refs;
-      const treeNodeData = enhancedTableRef.getData('first_level_150');
-      console.log(treeNodeData);
-      // 因为可能会存在前面的元素节点展开，或行展开，故而下标跟序号不一定一样，不一定是 150
-      enhancedTableRef.primaryTableRef.scrollToElement({
-        // 跳转元素下标（第 151 个元素位置）
-        index: treeNodeData.rowIndex - this.selectedRowKeys.length,
+
+      // 方式一：通过行唯一标识跳转到指定行
+      enhancedTableRef.scrollToElement({
+        // 滚动到指定元素
+        key: 'first_level_150',
+        // 如果元素没有被展开，则跳转到父元素所在位置
+        // key: 'second_level_1510',
         // 滚动元素距离顶部的距离（如表头高度）
         top: 47,
         // 高度动态变化场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒。（固定高度不需要这个）
         time: 60,
       });
+
+      // 方式二：通过行下标跳转到指定行（示例代码有效：勿删）
+      // const treeNodeData = enhancedTableRef.getData('first_level_150');
+      // enhancedTableRef.primaryTableRef.scrollToElement({
+      //   // 跳转元素下标（第 151 个元素位置）
+      //   index: treeNodeData.rowIndex - this.expandedRowKeys.length,
+      //   // 滚动元素距离顶部的距离（如表头高度）
+      //   top: 47,
+      //   // 高度动态变化场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒。（固定高度不需要这个）
+      //   time: 60,
+      // });
     },
 
     onRowClick(data) {

src/table/_example/virtual-scroll.vue

@@ -93,8 +93,10 @@ export default {
   methods: {
     scrollToElement() {
       this.$refs.tableRef.scrollToElement({
-        // 跳转元素下标（第 256 个元素位置）
-        index: 255,
+        // 方式一：使用下标跳转到指定行（第 256 个元素位置）
+        // index: 255,
+        // 方式二：使用行唯一标识跳转到指定行（id = 255）
+        key: 255,
         // 滚动元素距离顶部的距离（如表头高度）
         top: 47,
         // 行高度动态变化场景场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒。（固定高度不需要这个）

src/table/base-table.tsx

@@ -11,6 +11,7 @@ import {
 } from '@vue/composition-api';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
+import get from 'lodash/get';
 import props from './base-table-props';
 import useTableHeader from './hooks/useTableHeader';
 import useColumnResize from './hooks/useColumnResize';
@@ -32,7 +33,7 @@ import TFoot from './tfoot';
 import log from '../_common/js/log';
 import { getIEVersion } from '../_common/js/utils/helper';
 import { getAffixProps } from './utils';
-import { Styles } from '../common';
+import { ComponentScrollToElementParams, Styles } from '../common';
 import { BaseTableCol, TableRowData } from './type';
 
 export const BASE_TABLE_EVENTS = ['page-change', 'cell-click', 'scroll', 'scrollX', 'scrollY', 'column-resize-change'];
@@ -274,9 +275,26 @@ export default defineComponent({
       addTableResizeObserver(tableRef.value);
     });
 
+    const tableData = computed(() => (isPaginateData.value ? dataSource.value : props.data));
+
+    const scrollToElement = (params: ComponentScrollToElementParams) => {
+      let { index } = params;
+      if (!index && index !== 0) {
+        if (!params.key) {
+          log.error('Table', 'scrollToElement: one of `index` or `key` must exist.');
+          return;
+        }
+        index = tableData.value?.findIndex((item) => get(item, props.rowKey) === params.key);
+        if (index < 0) {
+          log.error('Table', `${params.key} does not exist in data, check \`rowKey\` or \`data\` please.`);
+        }
+      }
+      virtualConfig.scrollToElement({ ...params, index });
+    };
+
     return {
       virtualConfig,
-      scrollToElement: virtualConfig.scrollToElement,
+      scrollToElement,
       columnResizable,
       thList,
       classPrefix,

src/table/enhanced-table.tsx

@@ -7,12 +7,19 @@ import primaryTableProps from './primary-table-props';
 import enhancedTableProps from './enhanced-table-props';
 import PrimaryTable, { BASE_TABLE_ALL_EVENTS } from './primary-table';
 import {
-  TdEnhancedTableProps, PrimaryTableCol, TableRowData, DragSortContext, TdPrimaryTableProps,
+  TdEnhancedTableProps,
+  PrimaryTableCol,
+  TableRowData,
+  DragSortContext,
+  TdPrimaryTableProps,
+  TableRowState,
 } from './type';
 import useTreeData from './hooks/useTreeData';
 import useTreeSelect from './hooks/useTreeSelect';
 import { TableListeners } from './base-table';
 import { usePrefixClass } from '../hooks/useConfig';
+import { ComponentScrollToElementParams } from '..';
+import log from '../_common/js/log';
 
 const PRIMARY_B_EVENTS = [
   'cell-click',
@@ -106,6 +113,30 @@ export default defineComponent({
       context.emit('row-click', p);
     };
 
+    const getScrollRowIndex = (rowStateData: TableRowState, key: string | number): number => {
+      if (!rowStateData) return -1;
+      if (rowStateData.rowIndex >= 0) return rowStateData.rowIndex;
+      if (rowStateData.rowIndex < 0) {
+        return getScrollRowIndex(rowStateData.parent, key);
+      }
+    };
+
+    const scrollToElement = (params: ComponentScrollToElementParams) => {
+      let { index } = params;
+      if (!index && index !== 0) {
+        if (!params.key) {
+          log.error('Table', 'scrollToElement: one of `index` or `key` must exist.');
+          return;
+        }
+        const rowStateData = treeDataMap.value.get(params.key);
+        index = getScrollRowIndex(rowStateData, params.key);
+        if (index < 0 || index === undefined) {
+          log.error('Table', `${params.key} does not exist in data, check \`rowKey\` or \`data\` please.`);
+        }
+      }
+      primaryTableRef.value.scrollToElement({ ...params, index });
+    };
+
     return {
       store,
       classPrefix,
@@ -119,6 +150,7 @@ export default defineComponent({
       onInnerSelectChange,
       onEnhancedTableRowClick,
       ...treeInstanceFunctions,
+      scrollToElement,
     };
   },
 

src/table/primary-table.tsx

@@ -22,6 +22,7 @@ import useEditableCell from './hooks/useEditableCell';
 import useEditableRow from './hooks/useEditableRow';
 import { EditableCellProps } from './editable-cell';
 import useStyle from './hooks/useStyle';
+import { ComponentScrollToElementParams } from '../common';
 
 export { BASE_TABLE_ALL_EVENTS } from './base-table';
 
@@ -293,8 +294,8 @@ export default defineComponent({
       tRowAttributes,
       primaryTableClasses,
       errorListMap,
-      scrollToElement: (data: any) => {
-        primaryTableRef.value.virtualConfig.scrollToElement(data);
+      scrollToElement: (data: ComponentScrollToElementParams) => {
+        primaryTableRef.value.scrollToElement(data);
       },
       scrollColumnIntoView: (colKey: string) => {
         primaryTableRef.value.scrollColumnIntoView(colKey);