Bladeren bron

perf(smart-table): 可编辑表格 props支持函数

shizhongming 2 jaren geleden
bovenliggende
commit
6029a5904f

+ 22 - 16
src/components/SmartTable/src/hooks/useSmartTableColumn.tsx

@@ -5,6 +5,7 @@ import type { VxeColumnSlotTypes } from 'vxe-table';
 import { isBoolean, isFunction } from '@/utils/is';
 import { getFormSize } from '../utils';
 import { VxeTablePropTypes } from 'vxe-table/types/table';
+import XEUtils from 'xe-utils';
 
 const getComponentProps = (
   params: VxeColumnSlotTypes.DefaultSlotParams,
@@ -150,41 +151,46 @@ export const useSmartTableColumn = (tableProps: ComputedRef<SmartTableProps>, t:
  */
 const convertEditRender = (columns: SmartColumn[], tableSize) => {
   for (const column of columns) {
+    const convertProps: Recordable = {};
     const { editRender } = column;
     if (!editRender) {
       continue;
     }
-    if (!editRender.props) {
-      editRender.props = {};
-    }
     // 处理尺寸
-    if (!editRender.props?.size) {
-      const size = getFormSize(tableSize);
-      if (editRender.props) {
-        editRender.props.size = size;
-      } else {
-        editRender.props = {
-          size,
-        };
-      }
-    }
+    convertProps.size = getFormSize(tableSize);
+
     // 处理自动聚焦
     const { autofocus, name } = editRender;
     if (isBoolean(autofocus) && autofocus) {
       if (name === 'ASelect') {
         editRender.autofocus = '.ant-select-selection-search-input';
-      }
-      if (name === 'ADatePicker') {
+      } else if (name === 'ADatePicker') {
         editRender.autofocus = '.ant-picker-input input';
+      } else {
+        editRender.autofocus = undefined;
       }
     }
     // 处理事件冒泡
     if (editRender.stopEnterBubbling !== false) {
-      editRender.props.onKeydown = (event: KeyboardEvent) => {
+      convertProps.onKeydown = (event: KeyboardEvent) => {
         if (event.key === 'Enter') {
           event.stopPropagation();
         }
       };
     }
+    if (XEUtils.isFunction(editRender.props)) {
+      const defaultProps = editRender.props as Function;
+      editRender.props = (row) => {
+        return {
+          ...convertProps,
+          ...defaultProps(row),
+        };
+      };
+    } else {
+      editRender.props = {
+        ...convertProps,
+        ...(editRender.props || {}),
+      };
+    }
   }
 };

+ 5 - 3
src/components/SmartTable/src/renderer/VxeTableAntdRenderer.ts

@@ -48,8 +48,10 @@ function getCellEditFilterProps(
   _: VxeGlobalRendererHandles.RenderEditParams | VxeGlobalRendererHandles.RenderFilterParams,
   value: any,
   defaultProps?: { [prop: string]: any },
+  row?: any,
 ) {
-  return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value });
+  const props = XEUtils.isFunction(renderOpts.props) ? renderOpts.props(row) : renderOpts.props;
+  return XEUtils.assign({}, defaultProps, props, { [getModelProp(renderOpts)]: value });
 }
 
 function getItemProps(
@@ -339,7 +341,7 @@ function createEditRender(defaultProps?: { [key: string]: any }) {
     return [
       h(resolveComponent(name), {
         ...attrs,
-        ...getCellEditFilterProps(renderOpts, params, cellValue, defaultProps),
+        ...getCellEditFilterProps(renderOpts, params, cellValue, defaultProps, row),
         ...getEditOns(renderOpts, params),
       }),
     ];
@@ -669,7 +671,7 @@ export const VXETablePluginAntd = {
           const { row, column } = params;
           const { attrs } = renderOpts;
           const cellValue = XEUtils.get(row, column.field);
-          const props = getCellEditFilterProps(renderOpts, params, cellValue);
+          const props = getCellEditFilterProps(renderOpts, params, cellValue, undefined, row);
           const ons = getEditOns(renderOpts, params);
           if (optionGroups) {
             const groupOptions = optionGroupProps.options || 'options';

+ 3 - 0
src/components/SmartTable/src/types/SmartTableColumnType.ts

@@ -1,5 +1,6 @@
 import type { VxeTableDefines, VxeColumnSlotTypes, VxeColumnPropTypes } from 'vxe-table';
 import { VxeTableConstructor, VxeTablePrivateMethods } from 'vxe-table/types/table';
+import { type ComponentPropsOptions } from 'vue';
 
 export type SmartTableColumnComponent = 'switch' | 'tag' | 'button' | 'booleanTag' | 'useYnTag';
 
@@ -36,6 +37,8 @@ export interface SmartEditRender extends VxeColumnPropTypes.EditRender {
   required?: boolean;
   // 校验规则
   rules?: VxeTableDefines.ValidatorRule[];
+
+  props?: ComponentPropsOptions | ((row: any) => Recordable);
 }
 
 export type SmartColumnDynamicClass =