perf: perf TableAction

vben
1 parent 5a6db8c6
Showing 4 changed files with 74 additions and 165 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/components/CellResize.tsx
src/components/Table/src/components/TableAction.tsx
src/components/Table/src/components/renderEditableCell.tsx
@@ -8,11 +8,13 @@
 ### ⚡ Performance Improvements
  
 - 优化首屏体积大小
+- 优化 TableAction 组件
  
 ### 🐛 Bug Fixes
  
 - 修复一级菜单折叠显示菜单名问题
 - 修复预览命令不打包问题
+- 修复表格 actionColOptions 参数不生效问题
  
 # 2.0.0-rc.3 (2020-10-19)
  
-import { defineComponent, ref, computed, unref } from 'vue';
-import { injectTable } from '../hooks/useProvinceTable';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-
-import VueDraggableResizable from 'vue-draggable-resizable';
-export default defineComponent({
-  name: 'DragResize',
-  setup(props, { slots, attrs }) {
-    const elRef = ref<HTMLTableRowElement | null>(null);
-    const draggingMapRef = ref<{ [key in string]: number | string }>({});
-
-    const tableInstance = injectTable();
-
-    const getColumnsRef = computed(() => {
-      const columns = tableInstance.getColumns();
-      columns.forEach((col) => {
-        const { key } = col;
-        if (key) {
-          draggingMapRef.value[key] = col.width as number;
-        }
-      });
-      return columns;
-    });
-
-    return () => {
-      const { key = '', ...restProps } = { ...attrs };
-      const col = unref(getColumnsRef).find((col) => {
-        const k = col.dataIndex || col.key;
-        return k === key;
-      });
-      if (!col || !col.width) {
-        return <th {...restProps}>{getSlot(slots, 'default')}</th>;
-      }
-      const onDrag = (x: number) => {
-        draggingMapRef.value[key] = 0;
-        col.width = Math.max(x, 1);
-      };
-
-      const onDragstop = () => {
-        const el = unref(elRef);
-        if (!el) {
-          return;
-        }
-        draggingMapRef.value[key] = el.getBoundingClientRect().width;
-      };
-      return (
-        <th
-          {...restProps}
-          class="resize-table-th"
-          ref={elRef}
-          style={{
-            width: `${col.width}px`,
-          }}
-        >
-          {getSlot(slots, 'default')}
-          <VueDraggableResizable
-            key={col.key}
-            class="table-draggable-handle"
-            w={10}
-            x={draggingMapRef.value[key] || col.width}
-            z={1}
-            axis="x"
-            draggable={true}
-            resizable={false}
-            onDragging={onDrag}
-            onDragstop={onDragstop}
-          />
-        </th>
-      );
-    };
-  },
-});
@@ -16,114 +16,93 @@ export default defineComponent({
       type: Array as PropType<ActionItem[]>,
       default: null,
     },
+
+    moreText: {
+      type: String as PropType<string>,
+      default: '更多',
+    },
   },
   setup(props) {
+    function renderButton(action: ActionItem, index: number) {
+      const { disabled = false, label, icon, color = '', type = 'link' } = action;
+      const button = (
+        <Button type={type} size="small" disabled={disabled} color={color} {...action} key={index}>
+          {() => (
+            <>
+              {label}
+              {icon && <Icon icon={icon} />}
+            </>
+          )}
+        </Button>
+      );
+      return button;
+    }
+
+    function renderPopConfirm(action: ActionItem, index: number) {
+      const { popConfirm = null } = action;
+      if (!popConfirm) {
+        return renderButton(action, index);
+      }
+      const {
+        title,
+        okText = '确定',
+        cancelText = '取消',
+        confirm = () => {},
+        cancel = () => {},
+        icon = '',
+      } = popConfirm;
+      return (
+        <Popconfirm
+          key={`P-${index}`}
+          title={title}
+          onConfirm={confirm}
+          onCancel={cancel}
+          okText={okText}
+          cancelText={cancelText}
+          icon={icon}
+        >
+          {() => renderButton(action, index)}
+        </Popconfirm>
+      );
+    }
+
+    const dropdownDefaultSLot = () => (
+      <Button type="link" size="small">
+        {{
+          default: () => (
+            <>
+              {props.moreText}
+              <DownOutlined />
+            </>
+          ),
+        }}
+      </Button>
+    );
+
     // 增加按钮的TYPE和COLOR
     return () => {
       const { dropDownActions = [], actions } = props;
       return (
         <div class={prefixCls}>
-          {actions &&
-            actions.length &&
-            actions.map((action, index) => {
-              const {
-                disabled = false,
-                label,
-                icon,
-                color = '',
-                type = 'link',
-                popConfirm = null,
-              } = action;
-              const button = (
-                <Button
-                  type={type}
-                  size="small"
-                  disabled={disabled}
-                  color={color}
-                  {...action}
-                  key={index}
-                >
-                  {() => (
-                    <>
-                      {label}
-                      {icon && <Icon icon={icon} />}
-                    </>
-                  )}
-                </Button>
-              );
-              if (popConfirm !== null) {
-                const {
-                  title,
-                  okText = '确定',
-                  cancelText = '取消',
-                  confirm = () => {},
-                  cancel = () => {},
-                  icon = '',
-                } = popConfirm;
-                return (
-                  <Popconfirm
-                    key={`P-${index}`}
-                    title={title}
-                    onConfirm={confirm}
-                    onCancel={cancel}
-                    okText={okText}
-                    cancelText={cancelText}
-                    icon={icon}
-                  >
-                    {() => button}
-                  </Popconfirm>
-                );
-              }
-              return button;
-            })}
-          {dropDownActions && dropDownActions.length && (
+          {actions?.map((action, index) => {
+            return renderPopConfirm(action, index);
+          })}
+          {dropDownActions?.length && (
             <Dropdown>
               {{
-                default: () => (
-                  <Button type="link" size="small">
-                    {{
-                      default: () => (
-                        <>
-                          更多
-                          <DownOutlined />
-                        </>
-                      ),
-                    }}
-                  </Button>
-                ),
+                default: dropdownDefaultSLot,
                 overlay: () => {
                   return (
                     <Menu>
                       {{
                         default: () => {
                           return dropDownActions.map((action, index) => {
-                            const {
-                              disabled = false,
-                              label,
-                              icon,
-                              color = '',
-                              type = 'link',
-                            } = action;
+                            const { disabled = false } = action;
                             return (
                               <Menu.Item key={`${index}`} disabled={disabled}>
-                                {() => (
-                                  <Button
-                                    type={type}
-                                    size="small"
-                                    {...action}
-                                    disabled={disabled}
-                                    color={color}
-                                  >
-                                    {{
-                                      default: () => (
-                                        <>
-                                          {label}
-                                          {icon && <Icon icon={icon} />}
-                                        </>
-                                      ),
-                                    }}
-                                  </Button>
-                                )}
+                                {() => {
+                                  return renderPopConfirm(action, index);
+                                }}
                               </Menu.Item>
                             );
                           });
@@ -46,7 +46,7 @@ const EditableCell = defineComponent({
     const currentValueRef = ref<string | boolean>(props.value);
  
     function handleChange(e: ChangeEvent | string | boolean) {
-      if ((e as ChangeEvent).target && Reflect.has((e as ChangeEvent).target, 'value')) {
+      if (Reflect.has((e as ChangeEvent)?.target, 'value')) {
         currentValueRef.value = (e as ChangeEvent).target.value;
       }
       if (isString(e) || isBoolean(e)) {
@@ -58,7 +58,7 @@ const EditableCell = defineComponent({
       isEditRef.value = true;
       nextTick(() => {
         const el = unref(elRef);
-        el && el.focus && el.focus();
+        el?.focus();
       });
     }