perf: perf table

vben
1 parent efbde0d5
Showing 8 changed files with 40 additions and 23 deletions
src/components/Button/src/PopConfirmButton.vue
src/components/Table/index.ts
src/components/Table/src/components/TableAction.vue
src/components/Table/src/components/editable/EditableCell.vue
src/components/Table/src/components/editable/helper.ts
src/components/Table/src/hooks/useTableScroll.ts
src/components/Table/src/style/index.less
src/views/demo/page/form/high/PersonTable.vue
@@ -13,6 +13,7 @@
     inheritAttrs: false,
     components: { Popconfirm, BasicButton },
     props: {
+      size: propTypes.oneOf(['large', 'default', 'small']).def(),
       enable: propTypes.bool.def(true),
       okText: propTypes.string,
       cancelText: propTypes.string,
@@ -31,7 +32,7 @@
         return popValues;
       });
       return () => {
-        const Button = h(BasicButton, omit(unref(attrs), 'icon'), extendSlots(slots));
+        const Button = h(BasicButton, unref(getBindValues), extendSlots(slots));
         if (!props.enable) {
           return Button;
         }
@@ -2,11 +2,9 @@ import { createAsyncComponent } from &#39;/@/utils/factory/createAsyncComponent&#39;;
 export { default as BasicTable } from './src/BasicTable.vue';
 export { default as TableAction } from './src/components/TableAction.vue';
-// export { default as TableImg } from './src/components/TableImg.vue';
 export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue';
 export const TableImg = createAsyncComponent(() => import('./src/components/TableImg.vue'));
-// export const TableAction = createAsyncComponent(() => import('./src/components/TableAction.vue'));
 export * from './src/types/table';
 export * from './src/types/pagination';
@@ -5,7 +5,10 @@
         <Icon :icon="action.icon" class="mr-1" v-if="action.icon" />
         {{ action.label }}
       </PopConfirmButton>
-      <Divider type="vertical" v-if="divider && index < getActions.length" />
+      <Divider
+        type="vertical"
+        v-if="divider && index < getActions.length - (dropDownActions ? 0 : 1)"
+      />
     </template>
     <Dropdown :trigger="['hover']" :dropMenuList="getDropList" v-if="dropDownActions">
       <slot name="more" />
@@ -44,17 +47,31 @@
     },
     setup(props) {
       const { prefixCls } = useDesign('basic-table-action');
-      let table = {};
+      let table: Partial<TableActionType> = {};
       if (!props.outside) {
         table = useTableContext();
       }
+      // const getSize = computed(() => {
+      //   const size = table?.getSize?.();
+      //   if (size === 'middle' || !size) {
+      //     return;
+      //   }
+
+      //   if (size === 'default') {
+      //     return 'large';
+      //   }
+      //   return size;
+      // });
+
       const getActions = computed(() => {
         return (props.actions || []).map((action) => {
           const { popConfirm } = action;
+          // const size = unref(getSize);
           return {
             type: 'link',
             size: 'small',
+            // ...(size ? { size } : {}),
             ...action,
             ...(popConfirm || {}),
             onConfirm: popConfirm?.confirm,
@@ -85,6 +85,18 @@
         return unref(ruleMessage) && unref(ruleVisible);
       });
+      // const getSize = computed(() => {
+      //   const size = table?.getSize?.();
+      //   if (size === 'middle' || !size) {
+      //     return;
+      //   }
+
+      //   if (size === 'default') {
+      //     return 'large';
+      //   }
+      //   return size;
+      // });
+
       const getIsCheckComp = computed(() => {
         const component = unref(getComponent);
         return ['Checkbox', 'Switch'].includes(component);
@@ -300,6 +312,7 @@
         handleOptionsChange,
         getWrapperStyle,
         getRowEditable,
+        // getSize,
       };
     },
   });
@@ -8,10 +8,10 @@ const { t } = useI18n();
  */
 export function createPlaceholderMessage(component: ComponentType) {
   if (component.includes('Input')) {
-    return t('component.form.input');
+    return t('common.inputText');
   }
   if (component.includes('Picker')) {
-    return t('component.form.choose');
+    return t('common.chooseText');
   }
   if (
@@ -20,7 +20,7 @@ export function createPlaceholderMessage(component: ComponentType) {
     component.includes('Radio') ||
     component.includes('Switch')
   ) {
-    return t('component.form.choose');
+    return t('common.chooseText');
   }
   return '';
 }
@@ -143,7 +143,7 @@ export function useTableScroll(
     const table = unref(tableElRef);
     const tableWidth = table?.$el?.offsetWidth ?? 0;
-    return tableWidth > width ? tableWidth - 24 : width;
+    return tableWidth > width ? '100%' : width;
   });
   const getScrollRef = computed(() => {
@@ -51,7 +51,7 @@
   //
   .ant-table {
     width: 100%;
-    overflow-x: auto;
+    overflow-x: hidden;
     border: none;
     &-title {
@@ -107,22 +107,11 @@
     border: 1px solid @border-color !important;
   }
-  .ant-table td {
-    white-space: nowrap;
-  }
-
   .ant-table-tbody > tr > td,
   .ant-table-tbody > tr > th,
   .ant-table-thead > tr > td,
   .ant-table-thead > tr > th {
-    white-space: pre;
-  }
-
-  .ant-table-tbody > tr > td > span,
-  .ant-table-tbody > tr > th > span,
-  .ant-table-thead > tr > td > span,
-  .ant-table-thead > tr > th > span {
-    display: block;
+    white-space: nowrap;
   }
   .ant-table-row-cell-last {
@@ -30,7 +30,6 @@
       title: '工号',
       dataIndex: 'no',
       editRow: true,
-
       // customRender: renderEditableRow({ dataIndex: 'no', placeholder: '请输入工号' }),
     },
     {