perf(table): fixed code style

修复一些代码检查警告，并且为table的canResize属性添加不兼容场景警告 close: #1070

perf(table): fixed code style
修复一些代码检查警告，并且为table的canResize属性添加不兼容场景警告 close: #1070
无木
1 parent 30c5fc63
Showing 5 changed files with 30 additions and 10 deletions
src/components/Page/index.ts
src/components/Page/src/PageWrapper.vue
src/components/Table/src/BasicTable.vue
src/components/Table/src/hooks/useTableForm.ts
src/views/demo/table/FetchTable.vue
@@ -5,3 +5,5 @@ import pageWrapper from &#39;./src/PageWrapper.vue&#39;;
 export const PageFooter = withInstall(pageFooter);
 export const PageWrapper = withInstall(pageWrapper);
+
+export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
@@ -33,7 +33,7 @@
   </div>
 </template>
 <script lang="ts">
-  import type { CSSProperties, PropType } from 'vue';
+  import { CSSProperties, PropType, provide } from 'vue';
   import { defineComponent, computed, watch, ref, unref } from 'vue';
   import PageFooter from './PageFooter.vue';
@@ -43,6 +43,7 @@
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
   import { useContentHeight } from '/@/hooks/web/useContentHeight';
+  import { PageWrapperFixedHeightKey } from '..';
   export default defineComponent({
     name: 'PageWrapper',
@@ -68,6 +69,11 @@
       const footerRef = ref(null);
       const { prefixCls } = useDesign('page-wrapper');
+      provide(
+        PageWrapperFixedHeightKey,
+        computed(() => props.fixedHeight)
+      );
+
       const getIsContentFullHeight = computed(() => {
         return props.contentFullHeight;
       });
@@ -39,9 +39,10 @@
     ColumnChangeParam,
   } from './types/table';
-  import { defineComponent, ref, computed, unref, toRaw } from 'vue';
+  import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
   import { Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
+  import { PageWrapperFixedHeightKey } from '/@/components/Page';
   import expandIcon from './components/ExpandIcon';
   import HeaderCell from './components/HeaderCell.vue';
   import { InnerHandlers } from './types/table';
@@ -64,6 +65,7 @@
   import { omit } from 'lodash-es';
   import { basicProps } from './props';
   import { isFunction } from '/@/utils/is';
+  import { warn } from '/@/utils/log';
   export default defineComponent({
     components: {
@@ -104,6 +106,13 @@
         return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
       });
+      const isFixedHeightPage = inject(PageWrapperFixedHeightKey);
+      watchEffect(() => {
+        unref(isFixedHeightPage) &&
+          props.canResize &&
+          warn("[BasicTable] 'canRize' not worked with PageWrapper while 'fixedHeight' is true");
+      });
+
       const { getLoading, setLoading } = useLoading(getProps);
       const {
         getPaginationInfo,
@@ -380,9 +389,9 @@
         align-items: center;
       }
-      .ant-table-tbody > tr.ant-table-row-selected td {
-        //background-color: fade(@primary-color, 8%) !important;
-      }
+      //.ant-table-tbody > tr.ant-table-row-selected td {
+      //background-color: fade(@primary-color, 8%) !important;
+      //}
     }
     .ant-pagination {
@@ -21,9 +21,11 @@ export function useTableForm(
     };
   });
-  const getFormSlotKeys = computed(() => {
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
     const keys = Object.keys(slots);
-    return keys.map((item) => (item.startsWith('form-') ? item : null)).filter(Boolean);
+    return keys
+      .map((item) => (item.startsWith('form-') ? item : null))
+      .filter((item) => !!item) as string[];
   });
   function replaceFormSlotKey(key: string) {
 <template>
-  <div class="p-4">
+  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
     <BasicTable @register="registerTable">
       <template #toolbar>
         <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
         <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
       </template>
     </BasicTable>
-  </div>
+  </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns } from './tableData';
+  import { PageWrapper } from '/@/components/Page';
   import { demoListApi } from '/@/api/demo/table';
   export default defineComponent({
-    components: { BasicTable },
+    components: { BasicTable, PageWrapper },
     setup() {
       const [registerTable, { reload }] = useTable({
         title: '远程加载示例',