feat(table): add headerTop slot

为表格添加`headerTop`插槽（表格头部的标题之上），以及相关演示 close: #881
vbenjs · Jul 8, 2021 · 540423e · 540423e
1 parent 9cf070d
commit 540423e
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 19 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
 - **Table**
   - 修复滚动条样式问题
   - 修复树形表格的带有展开图标的单元格的内容对齐问题
+  - 新增`headerTop`插槽
 - **AppSearch** 修复可能会搜索隐藏菜单的问题
 - **其它**
   - 修复菜单默认折叠的配置不起作用的问题

diff --git a/src/components/Table/src/components/TableHeader.vue b/src/components/Table/src/components/TableHeader.vue
@@ -1,16 +1,25 @@
 <template>
-  <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
-
-  <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
-
-  <div :class="`${prefixCls}__toolbar`">
-    <slot name="toolbar"></slot>
-    <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
-    <TableSetting
-      :setting="tableSetting"
-      v-if="showTableSetting"
-      @columns-change="handleColumnChange"
-    />
+  <div style="width: 100%">
+    <div v-if="$slots.headerTop" style="margin: 5px">
+      <slot name="headerTop"></slot>
+    </div>
+    <div style="width: 100%; display: flex">
+      <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
+      <TableTitle
+        :helpMessage="titleHelpMessage"
+        :title="title"
+        v-if="!$slots.tableTitle && title"
+      />
+      <div :class="`${prefixCls}__toolbar`">
+        <slot name="toolbar"></slot>
+        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
+        <TableSetting
+          :setting="tableSetting"
+          v-if="showTableSetting"
+          @columns-change="handleColumnChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">

diff --git a/src/components/Table/src/hooks/useTableHeader.ts b/src/components/Table/src/hooks/useTableHeader.ts
@@ -41,6 +41,11 @@ export function useTableHeader(
                       tableTitle: () => getSlot(slots, 'tableTitle'),
                     }
                   : {}),
+                ...(slots.headerTop
+                  ? {
+                      headerTop: () => getSlot(slots, 'headerTop'),
+                    }
+                  : {}),
               }
             ),
     };

diff --git a/src/views/demo/table/FormTable.vue b/src/views/demo/table/FormTable.vue
@@ -1,39 +1,64 @@
 <template>
-  <BasicTable @register="registerTable">
+  <BasicTable
+    @register="registerTable"
+    :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }"
+  >
     <template #form-custom> custom-slot </template>
-
+    <template #headerTop>
+      <a-alert type="info" show-icon>
+        <template #message>
+          <template v-if="checkedKeys.length > 0">
+            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
+            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
+          </template>
+          <template v-else>
+            <span>未选中任何项目</span>
+          </template>
+        </template>
+      </a-alert>
+    </template>
     <template #toolbar>
       <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
     </template>
   </BasicTable>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns, getFormConfig } from './tableData';
+  import { Alert } from 'ant-design-vue';
 
   import { demoListApi } from '/@/api/demo/table';
 
   export default defineComponent({
-    components: { BasicTable },
+    components: { BasicTable, AAlert: Alert },
     setup() {
+      const checkedKeys = ref<Array<string | number>>([]);
       const [registerTable, { getForm }] = useTable({
         title: '开启搜索区域',
         api: demoListApi,
         columns: getBasicColumns(),
         useSearchForm: true,
         formConfig: getFormConfig(),
         showTableSetting: true,
-        rowSelection: { type: 'checkbox' },
+        showIndexColumn: false,
+        rowKey: 'id',
       });
 
       function getFormValues() {
         console.log(getForm().getFieldsValue());
       }
 
+      function onSelectChange(selectedRowKeys: (string | number)[]) {
+        console.log(selectedRowKeys);
+        checkedKeys.value = selectedRowKeys;
+      }
+
       return {
         registerTable,
         getFormValues,
+        checkedKeys,
+        onSelectChange,
       };
     },
   });

diff --git a/src/views/demo/table/tableData.tsx b/src/views/demo/table/tableData.tsx
@@ -31,13 +31,13 @@ export function getBasicColumns(): BasicColumn[] {
     },
     {
       title: '开始时间',
-      width: 120,
+      width: 150,
       sorter: true,
       dataIndex: 'beginTime',
     },
     {
       title: '结束时间',
-      width: 120,
+      width: 150,
       sorter: true,
       dataIndex: 'endTime',
     },