👣 二次封装扩展vben-Table组件

kicc-ui/src/components/Table/src/BasicTable.vue

@@ -328,6 +328,14 @@
     .ant-table-tbody > tr.ant-table-row-selected td {
       background-color: #262626;
     }
+
+    .@{prefix-cls} {
+      // [黑暗模式]table顶部插槽多选栏样式
+      .alert {
+        background-color: #323232;
+        border-color: #424242;
+      }
+    }
   }
 
   .@{prefix-cls} {
@@ -410,6 +418,13 @@
         padding: 12px 8px;
       }
 
+      // [明亮模式]table顶部插槽多选栏样式
+      .alert {
+        height: 38px;
+        background-color: #f3f3f3;
+        border-color: #e3e3e3;
+      }
+
       &--inset {
         .ant-table-wrapper {
           padding: 0;

kicc-ui/src/components/Table/src/components/TableHeader.vue

@@ -20,20 +20,48 @@
         />
       </div>
     </div>
+
+    <!------------------------------------二次封装扩展------------------------------------->
+    <!--扩展table顶部插槽-->
+    <div style="margin:-2px 0 -2px;padding-top: 5px;">
+      <slot name="tableTop">
+        <Alert v-if="openRowSelection!=null"
+               type="info"
+               show-icon
+               class="alert"
+        >
+          <template #message>
+            <template v-if="selectRowKeys.length > 0">
+              <span>已选中 {{ selectRowKeys.length }} 条记录(可跨页)</span>
+              <Divider type="vertical"/>
+              <a @click="setSelectedRowKeys([])">清空</a>
+              <slot name="alertAfter"></slot>
+            </template>
+            <template v-else>
+              <span>未选中任何数据</span>
+            </template>
+          </template>
+        </Alert>
+      </slot>
+    </div>
+    <!--扩展table顶部插槽-->
+
   </div>
 </template>
 <script lang="ts">
   import type { TableSetting, ColumnChangeParam } from '../types/table';
   import type { PropType } from 'vue';
-  import { defineComponent } from 'vue';
-  import { Divider } from 'ant-design-vue';
+  import { defineComponent, computed } from 'vue';
+  import { Divider, Alert } from 'ant-design-vue';
   import TableSettingComponent from './settings/index.vue';
   import TableTitle from './TableTitle.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTableContext } from '../hooks/useTableContext';
 
   export default defineComponent({
     name: 'BasicTableHeader',
     components: {
+      Alert,
       Divider,
       TableTitle,
       TableSetting: TableSettingComponent,
@@ -59,7 +87,18 @@
       function handleColumnChange(data: ColumnChangeParam[]) {
         emit('columns-change', data);
       }
-      return { prefixCls, handleColumnChange };
+
+      const { getSelectRowKeys, setSelectedRowKeys, getRowSelection } = useTableContext();
+      const selectRowKeys = computed(() => getSelectRowKeys());
+      const openRowSelection = computed(() => getRowSelection());
+
+      return {
+        prefixCls,
+        handleColumnChange,
+        selectRowKeys,
+        setSelectedRowKeys,
+        openRowSelection
+      };
     },
   });
 </script>

kicc-ui/src/views/system/user/index.vue

@@ -7,7 +7,6 @@
     <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect"/>
     <BasicTable class="w-3/4 xl:w-5/5"
                 @register="registerTable"
-                @fetch-success="handleSelectionChange"
                 @selection-change="handleSelectionChange"
     >
       <template #toolbar>
@@ -102,7 +101,7 @@
       const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
         title: '用户列表',
         api: listUser,
         rowKey: 'id',
@@ -172,6 +171,7 @@
       /** 处理表单提交成功 */
       function handleSuccess() {
         reload();
+        clearSelectedRowKeys();
       }
 
       /** 处理部门管理点击 */