perf: perf TableAction

vbenjs · Oct 20, 2020 · 4b384b1 · 4b384b1
1 parent 5a6db8c
commit 4b384b1
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 165 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -8,11 +8,13 @@
 ### ⚡ Performance Improvements
 
 - 优化首屏体积大小
+- 优化 TableAction 组件
 
 ### 🐛 Bug Fixes
 
 - 修复一级菜单折叠显示菜单名问题
 - 修复预览命令不打包问题
+- 修复表格 actionColOptions 参数不生效问题
 
 # 2.0.0-rc.3 (2020-10-19)
 

diff --git a/src/components/Table/src/components/CellResize.tsx b/src/components/Table/src/components/CellResize.tsx
diff --git a/src/components/Table/src/components/TableAction.tsx b/src/components/Table/src/components/TableAction.tsx
@@ -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>
                             );
                           });

diff --git a/src/components/Table/src/components/renderEditableCell.tsx b/src/components/Table/src/components/renderEditableCell.tsx
@@ -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();
       });
     }