refactor(Table): 重构多选事件触发逻辑 (#1244)

* refactor(Table): 重构多选事件触发逻辑

Author: xingyan95

packages/devui-vue/devui/table/src/components/column/config.tsx

@@ -21,7 +21,7 @@ export const cellMap = {
         halfChecked: store.states._halfChecked.value,
         onChange: (val: boolean) => {
           store.states._checkAll.value = val;
-          store._table.emit('check-all-change', val, store.getCheckedRows());
+          store.emitTableEvent('check-all-change', val, store.getCheckedRows());
         },
       });
     },
@@ -30,7 +30,7 @@ export const cellMap = {
         modelValue: store.isRowChecked(rowData, rowIndex),
         onChange: (val: boolean) => {
           store.checkRow(val, rowData, rowIndex);
-          store._table.emit('check-change', val, store.states._data.value[rowIndex], store.getCheckedRows());
+          store.emitTableEvent('check-change', val, store.states._data.value[rowIndex], store.getCheckedRows());
         },
       });
     },

packages/devui-vue/devui/table/src/store/index.ts

@@ -1,5 +1,6 @@
-import { isBoolean } from '../../../shared/utils';
 import { watch, Ref, ref, computed, unref } from 'vue';
+import type { SetupContext } from 'vue';
+import { isBoolean } from '../../../shared/utils';
 import type { Column, LevelColumn } from '../components/column/column-types';
 import type { DefaultRow, ITable, RowKeyType } from '../table-types';
 import type { TableStore } from './store-types';
@@ -239,7 +240,11 @@ function createFixedLogic(columns: Ref<Column[]>) {
  * @param table 表对象
  * @returns TableStore
  */
-export function createStore<T extends Record<string, unknown>>(dataSource: Ref<T[]>, table: ITable<DefaultRow>): TableStore<T> {
+export function createStore<T extends Record<string, unknown>>(
+  dataSource: Ref<T[]>,
+  table: ITable<DefaultRow>,
+  ctx: SetupContext
+): TableStore<T> {
   const _data: Ref<T[]> = ref([]);
   const { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns } = createColumnGenerator();
   const { flatRows, hiddenRowKeys, rowLevelMap, updateRows, firstDefaultColumn, updateFirstDefaultColumn } = createRowGenerator<T>(
@@ -261,6 +266,10 @@ export function createStore<T extends Record<string, unknown>>(dataSource: Ref<T
 
   const { tableCellModeMap, setCellMode, resetCellMode } = useEditTableCell();
 
+  const emitTableEvent = (eventName: string, ...params: unknown[]) => {
+    ctx.emit.apply(ctx, [eventName, ...params]);
+  };
+
   watch(
     dataSource,
     (value: T[]) => {
@@ -271,7 +280,6 @@ export function createStore<T extends Record<string, unknown>>(dataSource: Ref<T
   );
 
   return {
-    _table: table,
     states: {
       _data,
       flatRows,
@@ -304,5 +312,6 @@ export function createStore<T extends Record<string, unknown>>(dataSource: Ref<T
     updateFirstDefaultColumn,
     setCellMode,
     resetCellMode,
+    emitTableEvent,
   };
 }

packages/devui-vue/devui/table/src/store/store-types.ts

@@ -1,12 +1,10 @@
 import type { ComponentInternalInstance, Ref } from 'vue';
 import { Column, SortMethod, SortDirection } from '../components/column/column-types';
-import { DefaultRow, ITable } from '../table-types';
+import { DefaultRow } from '../table-types';
 
 // TableStore 对象
 // 主要是为了方便维护 Table 中的各种状态
 export interface TableStore<T = Record<string, unknown>> {
-  // 内置 table 对象
-  _table: ITable<DefaultRow>;
   // 具体存储的数据
   states: {
     // 外部数据源
@@ -68,6 +66,8 @@ export interface TableStore<T = Record<string, unknown>> {
   setCellMode: (row: DefaultRow, rowIndex: number, fields: string | string[], cellMode: string) => void;
   // 重置所有单元格状态为只读状态
   resetCellMode: () => void;
+  // 触发Table组件上的事件
+  emitTableEvent: (eventName: string, ...params: unknown[]) => void;
 }
 
 export interface UseExpand {

packages/devui-vue/devui/table/src/table.tsx

@@ -1,4 +1,5 @@
 import { provide, defineComponent, getCurrentInstance, computed, toRef, ref, onMounted, nextTick, withModifiers } from 'vue';
+import type { SetupContext } from 'vue';
 import { tableProps, TableProps, TABLE_TOKEN, ITableInstanceAndDefaultRow } from './table-types';
 import { useTable, useTableLayout, useTableWatcher } from './composables/use-table';
 import { useHorizontalScroll } from './composables/use-horizontal-scroll';
@@ -18,9 +19,9 @@ export default defineComponent({
   },
   props: tableProps,
   emits: ['sort-change', 'cell-click', 'row-click', 'check-change', 'check-all-change', 'expand-change', 'load-more'],
-  setup(props: TableProps, ctx) {
+  setup(props: TableProps, ctx: SetupContext) {
     const table = getCurrentInstance() as ITableInstanceAndDefaultRow;
-    const store = createStore(toRef(props, 'data'), table);
+    const store = createStore(toRef(props, 'data'), table, ctx);
     const tableId = `devui-table_${tableIdInit++}`;
     const tableRef = ref();
     table.tableId = tableId;