Fix the TableAlert component

Fix the TableAlert component at #723

apps/vue/src/components/Table/src/BasicTable.vue

@@ -78,11 +78,11 @@
   import { useDataSource } from './hooks/useDataSource';
   import { useLoading } from './hooks/useLoading';
   import { useRowSelection } from './hooks/useRowSelection';
+  import { useTableAlert } from './hooks/useTableAlert';
   import { useTableScroll } from './hooks/useTableScroll';
   import { useTableScrollTo } from './hooks/useScrollTo';
   import { useCustomRow } from './hooks/useCustomRow';
   import { useTableStyle } from './hooks/useTableStyle';
-  import { useTableAlert } from './hooks/useTableAlert';
   import { useTableHeader } from './hooks/useTableHeader';
   import { useTableExpand } from './hooks/useTableExpand';
   import { createTableContext } from './hooks/useTableContext';
@@ -253,7 +253,7 @@
         },
       };
 
-      const { getAlertEnabled, getAlertMessage } = useTableAlert(getProps, getSelectRowKeys);
+      const { getAlertEnabled, getAlertMessage } = useTableAlert(getProps, getRowSelectionRef);
 
       const { getHeaderProps } = useTableHeader(getProps, slots, handlers, getAlertEnabled, getAlertMessage);
 
@@ -446,6 +446,10 @@
       }
     }
 
+    .ant-alert {
+      margin-bottom: 16px;
+    }
+
     .ant-tag {
       margin-right: 0;
     }

apps/vue/src/components/Table/src/components/TableAlert.vue

@@ -1,7 +1,12 @@
 <template>
-  <Alert :class="prefixCls" type="info" :message="message">
-    <template #closeText>
-      <Button type="link" @click="handleDeSelect">{{ t('component.table.deSelected') }}</Button>
+  <Alert :class="prefixCls" type="info">
+    <template #message>
+      <div class="message-box">
+        <span class="message-content">{{ message }}</span>
+        <div class="message-button">
+          <Button type="link" @click="handleDeSelect">{{ t('component.table.deSelected') }}</Button>
+        </div>
+      </div>
     </template>
   </Alert>
 </template>
@@ -17,13 +22,13 @@
       default: '',
     },
   });
-  const emits = defineEmits(['onDeSelect']);
+  const emits = defineEmits(['de-select']);
 
   const { t } = useI18n();
   const { prefixCls } = useDesign('basic-table-alert');
 
   function handleDeSelect() {
-    emits('onDeSelect');
+    emits('de-select');
   }
 </script>
 
@@ -32,5 +37,21 @@
 
   .@{prefix-cls} {
     margin: 6px 0 3px 0;
+
+    .message-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      word-wrap: break-word;
+
+      .message-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .message-button {
+        margin-right: 0px;
+      }
+    }
   }
-</style>
+</style>

apps/vue/src/components/Table/src/hooks/useTableAlert.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef } from 'vue';
-import type { BasicTableProps } from '../types/table';
+import type { BasicTableProps, TableRowSelection } from '../types/table';
 
 import { computed, unref } from 'vue';
 import {} from '/@/hooks/web/useI18n';
@@ -7,23 +7,29 @@ import { useI18n } from 'vue-i18n';
 
 export function useTableAlert(
   propsRef: ComputedRef<BasicTableProps>,
-  getSelectRowKeys: () => string[]
+  rowSelectionRef: ComputedRef<TableRowSelection | null>,
 ) {
   const { t } = useI18n();
 
+  const getSelectRowKeysCount = computed(() => {
+    const rowSelection = unref(rowSelectionRef);
+    if (!rowSelection?.selectedRowKeys) {
+      return 0;
+    }
+    return rowSelection.selectedRowKeys.length;
+  });
+
   const getAlertEnabled = computed(() => {
     const props = unref(propsRef);
     if (!props.useSelectedAlert) {
       return false;
     }
-    const selectedKeys = getSelectRowKeys();
-    return selectedKeys.length > 0;
+    
+    return unref(getSelectRowKeysCount) > 0;
   });
 
   const getAlertMessage = computed(() => {
-    const selectedKeys = getSelectRowKeys();
-    console.log(selectedKeys);
-    return t('component.table.selectedRows', { count: selectedKeys.length });
+    return t('component.table.selectedRows', { count: unref(getSelectRowKeysCount) });
   });
 
   return {