perf: perf TableAction

CHANGELOG.zh_CN.md

@@ -8,11 +8,13 @@
 ### ⚡ Performance Improvements
 
 - 优化首屏体积大小
+- 优化 TableAction 组件
 
 ### 🐛 Bug Fixes
 
 - 修复一级菜单折叠显示菜单名问题
 - 修复预览命令不打包问题
+- 修复表格 actionColOptions 参数不生效问题
 
 # 2.0.0-rc.3 (2020-10-19)
 

src/components/Table/src/components/CellResize.tsx

-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>
-      );
-    };
-  },
-});

src/components/Table/src/components/TableAction.tsx

@@ -16,33 +16,17 @@ export default defineComponent({
       type: Array as PropType<ActionItem[]>,
       default: null,
     },
+
+    moreText: {
+      type: String as PropType<string>,
+      default: '更多',
+    },
   },
   setup(props) {
-    // 增加按钮的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;
+    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}
-                >
+        <Button type={type} size="small" disabled={disabled} color={color} {...action} key={index}>
           {() => (
             <>
               {label}
@@ -51,7 +35,14 @@ export default defineComponent({
           )}
         </Button>
       );
-              if (popConfirm !== null) {
+      return button;
+    }
+
+    function renderPopConfirm(action: ActionItem, index: number) {
+      const { popConfirm = null } = action;
+      if (!popConfirm) {
+        return renderButton(action, index);
+      }
       const {
         title,
         okText = '确定',
@@ -70,60 +61,48 @@ export default defineComponent({
           cancelText={cancelText}
           icon={icon}
         >
-                    {() => button}
+          {() => renderButton(action, index)}
         </Popconfirm>
       );
     }
-              return button;
-            })}
-          {dropDownActions && dropDownActions.length && (
-            <Dropdown>
-              {{
-                default: () => (
+
+    const dropdownDefaultSLot = () => (
       <Button type="link" size="small">
         {{
           default: () => (
             <>
-                          更多
+              {props.moreText}
               <DownOutlined />
             </>
           ),
         }}
       </Button>
-                ),
+    );
+
+    // 增加按钮的TYPE和COLOR
+    return () => {
+      const { dropDownActions = [], actions } = props;
+      return (
+        <div class={prefixCls}>
+          {actions?.map((action, index) => {
+            return renderPopConfirm(action, index);
+          })}
+          {dropDownActions?.length && (
+            <Dropdown>
+              {{
+                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} />}
-                                        </>
-                                      ),
+                                {() => {
+                                  return renderPopConfirm(action, index);
                                 }}
-                                  </Button>
-                                )}
                               </Menu.Item>
                             );
                           });

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();
       });
     }