plain-design 1.0.0-beta.1 → 1.0.0-beta.100

package/src/packages/components/TabGroup/index.tsx

@@ -6,10 +6,12 @@ import {TabsHeaderHorizontal} from "./header/horizontal/TabsHeaderHorizontal";
 import {TabsHeaderVertical} from "./header/vertical/TabsHeaderVertical";
 import Tab from "../Tab";
 import Icon from "../Icon";
+import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const TabGroup = designComponent({
   name: 'tab-group',
   props: {
+    ...StyleProps,
     modelValue: { type: [String, Number] },                   // 双向绑定值，控制当前显示的tab
     closeable: { type: Boolean },                             // 是否显示关闭按钮，会派发onClose事件
     fitHeight: { type: Boolean },                             // 适配高度
@@ -21,6 +23,7 @@ export const TabGroup = designComponent({
   slots: ['default', 'operator'],
   setup({ props, event: { emit }, slots }) {
 
+    const { styleComputed } = useStyle();
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const items = TabCollector.parent();
 
@@ -53,6 +56,7 @@ export const TabGroup = designComponent({
       getComponentCls('tab-group'),
       `tabs-head-position-${props.headPosition}`,
       `tabs-head-type-${props.headType}`,
+      `tab-group-size-${styleComputed.value.size}`,
       {
         'tabs-fit-height': props.fitHeight
       },
@@ -97,7 +101,7 @@ export const TabGroup = designComponent({
         const body = (
           <div className="tabs-body">
             {[...tabs.value].sort((a, b) => String(a.val).localeCompare(String(b.val))).map((tab, index) => (
-              <TabsInner item={tab.item} key={index} active={tab.active}/>
+              <TabsInner item={tab.item} key={index} active={tab.active} render={() => tab.item.slots.default()}/>
             ))}
           </div>
         );

package/src/packages/components/TabGroup/tabs.scss

@@ -6,6 +6,10 @@
     display: block;
   }
 
+  .tabs-header {
+    background-color: plv(bg-2);
+  }
+
   .tabs-header-item {
     cursor: pointer;
     user-select: none;
@@ -33,4 +37,26 @@
       margin-left: 4px;
     }
   }
+
+  .inner-tab {
+    & > .#{componentName(auto-table)}:first-child, & > .#{componentName(page-card)}:first-child {
+      .auto-table-body, & > div:first-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  @include sizeMixin(tab-group, (font-size)) {
+    .tabs-header {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+
+      .tabs-header-list {
+        box-sizing: border-box;
+        padding-left: $margin;
+        padding-right: $margin;
+      }
+    }
+  }
 }

package/src/packages/components/Table/editor/PlcAddress.tsx

@@ -11,11 +11,11 @@ export const PlcAddress = designComponent({
     types: { type: String, default: 'pcd' },
     service: { type: Object as PropType<iAddressService> },
 
-    provinceTitle: { type: String, default: () => i18n('base.province').d('省') },
+    provinceTitle: { type: String },
     provinceField: { type: String, default: 'province' },
-    cityTitle: { type: String, default: () => i18n('base.city').d('市') },
+    cityTitle: { type: String },
     cityField: { type: String, default: 'city' },
-    districtTitle: { type: String, default: () => i18n('base.district').d('区县') },
+    districtTitle: { type: String },
     districtField: { type: String, default: 'district' },
   },
   setup({ props }) {
@@ -33,11 +33,11 @@ export const PlcAddress = designComponent({
           <PlcAddressItem
             key={plcBindIds.province}
             bindId={plcBindIds.province}
-            title={props.provinceTitle}
+            title={props.provinceTitle || i18n.$it('base.province').d('省')}
             field={props.provinceField}
             province
             editColSpan={props.types.length}
-            formLabel={i18n('base.address').d("地址")}
+            formLabel={i18n.$it('base.address').d("地址")}
             filterType="province"
             filterHandler="like"
             v-slots={{
@@ -59,7 +59,7 @@ export const PlcAddress = designComponent({
             key={plcBindIds.city}
             parentBindId={plcBindIds.province}
             bindId={plcBindIds.city}
-            title={props.cityTitle}
+            title={props.cityTitle || i18n.$it('base.city').d('市')}
             field={props.cityField}
             city
             parentField={props.provinceField}
@@ -74,7 +74,7 @@ export const PlcAddress = designComponent({
           <PlcAddressItem
             key="district"
             parentBindId={plcBindIds.city}
-            title={props.districtTitle}
+            title={props.districtTitle || i18n.$it('base.district').d('区县')}
             field={props.districtField}
             district
             parentField={props.cityField}

package/src/packages/components/Table/editor/PlcDate.utils.tsx

@@ -2,7 +2,7 @@ import {computed, ExtractPropTypes, PropType} from "plain-design-composition";
 import {eDatePanel} from "../../DatePicker/date.utils";
 import {eMultipleValueType} from "../../../uses/useMultipleModel";
 import {createPlcPropOptions} from "../plc/utils/plc.utils";
-import {pick} from "../../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 
 /**
  * PlcDate继承于Date组件的属性

package/src/packages/components/Table/editor/PlcTime.utils.ts

@@ -1,7 +1,7 @@
 import {TimePublicProps} from "../../TimePicker/panel/time-panel.utils";
 import {PlcPropsOptions} from "../plc/utils/plc.utils";
 import {computed, ExtractPropTypes} from "plain-design-composition";
-import {pick} from "../../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 
 export const PlcTimePropsOptions = {
   ...PlcPropsOptions,

package/src/packages/components/Table/plc/use/useBasePlc.tsx

@@ -6,7 +6,7 @@ import {tPlcScopeSlots, tPlcSlots} from "../utils/plc.scope-slots";
 import {Validation} from "../../../Form/validate/createValidation";
 import {PlainObject} from "plain-utils/utils/event";
 import {isRuleRequired} from "../../../Form/validate/validate.utils";
-import {pick} from "../../../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 import {PlcExclusion} from "../../standard/PlcExclusion";
 
 export function useBasePlc(

package/src/packages/components/Table/plc/useTablePlc.tsx

@@ -3,7 +3,7 @@ import {iTableHooks} from "../table/utils/createTableHooks";
 import {computed, nextTick, onBeforeUnmount, reactive, useRefs, watch} from "plain-design-composition";
 import {PlcGroup} from "../../PlcGroup";
 import {TablePlcFixedType, tPlc, tPlcType} from "./utils/plc.utils";
-import {runOnce} from "../../../utils/runOnce";
+import {runOnce} from "plain-utils/utils/runOnce";
 import {formatPlcList, tPlcData} from "./formatPlcList";
 import {OpenController} from "../../../utils/OpenController";
 import {createEffects} from "plain-utils/utils/createEffects";

package/src/packages/components/Table/plc/utils/plc.utils.ts

@@ -5,7 +5,7 @@ import {FormItemValidatePropsOption} from "../../../Form/validate/validate.utils
 import {iTableCellRenderScope, iTableNode} from "../../table/utils/table.utils";
 import {deepcopy} from "plain-utils/object/deepcopy";
 import {PlainObject} from "plain-utils/utils/event";
-import {omit} from "../../../../utils/omit";
+import {omit} from "plain-utils/object/omit";
 import {createCounter} from "plain-utils/utils/createCounter";
 import {iFilterOption} from "../../../FilterService/utils/filter.service.utils";
 import {AsyncFormatter} from "../../../AsyncFormatter";

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.multiple.tsx

@@ -249,11 +249,11 @@ export function usePlcCheckMultiple(
           </Badge>
         ),
         popper: () => <>
-          <DropdownOption label={i18n('base.select.all').d('全选')} icon="pi-select-all" onClick={methods.checkAll}/>
-          <DropdownOption label={i18n('base.clear').d('清空')} icon="pi-menu" onClick={methods.uncheckAll}/>
+          <DropdownOption label={i18n.$it('base.select.all').d('全选')} icon="pi-select-all" onClick={methods.checkAll}/>
+          <DropdownOption label={i18n.$it('base.clear').d('清空')} icon="pi-menu" onClick={methods.uncheckAll}/>
           {!!model.value?.length && <>
-            <DropdownOption label={i18n('base.select.reverse').d('反选')} icon="pi-unordered-list" onClick={methods.reverse}/>
-            {!props.hideShowAllButton && <DropdownOption label={i18n('base.lookUp').d('查看')} icon="pi-ordered-list" onClick={methods.showAll}/>}
+            <DropdownOption label={i18n.$it('base.select.reverse').d('反选')} icon="pi-unordered-list" onClick={methods.reverse}/>
+            {!props.hideShowAllButton && <DropdownOption label={i18n.$it('base.lookUp').d('查看')} icon="pi-ordered-list" onClick={methods.showAll}/>}
           </>}
         </>
       }}

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.tsx

@@ -7,7 +7,7 @@ import {useWatchAutoClear} from "../../../../utils/watchEffectAutoClear";
 import {createPlcCheckHooks} from "./PlcCheck.hooks";
 import {usePlcCheckMultiple} from "./PlcCheck.multiple";
 import {usePlcCheckSingle} from "./PlcCheck.single";
-import {doNothing} from "../../../../utils/doNothing";
+import {doNothing} from "plain-utils/utils/doNothing";
 
 export const PlcCheck = designComponent({
   name: 'plc-check',

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.utils.ts

@@ -1,4 +1,4 @@
-import {omit} from "../../../../utils/omit";
+import {omit} from "plain-utils/object/omit";
 import {createPlcPropOptions, PlcEmitsOptions} from "../../plc/utils/plc.utils";
 import {ComponentEvent, ExtractPropTypes, PropType,} from "plain-design-composition";
 import {PlainObject} from "plain-utils/utils/event";

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -65,9 +65,9 @@ export const PlcExpand = designComponent({
        * @author  韦胜健
        * @date    2022/11/17 10:46
        */
-      renderExpand: (node: iTableNode) => {
+      renderExpand: (node: iTableNode, vIndex: number, vid: string, index: number) => {
         return (
-          <tr className="plt-row plt-expand-row" key={`expand_${node.state.index}`}>
+          <tr className="plt-row plt-expand-row" key={`expand_${table.props.virtualRowType === 'virtualIndex' ? vIndex : index}`} data-vid={vid}>
             <td className="plt-cell" rowSpan={1} colSpan={totalSpan.value}>
               <div className="plt-expand-body" style={expandStyles.value}>
                 {scopeSlots.expand({ node, row: node.data })}
@@ -128,29 +128,27 @@ export const PlcExpand = designComponent({
       },
     };
 
-    /**
-     * 不允许启用行虚拟滚动
-     * @author  韦胜健
-     * @date    2022/11/17 13:56
-     */
-    onBeforeUnmount(table.hooks.onEnableVirtual.use(() => false));
-
     /**
      * 拦截行渲染
      * @author  韦胜健
      * @date    2022/11/17 14:15
      */
-    onBeforeUnmount(table.hooks.onRenderRow.use((scope) => {
-      const { node, row, content } = scope;
-      if (!utils.isExpand(row)) {return;}
-      return {
-        node,
-        row,
-        content: <>
-          {content}
-          {utils.renderExpand(node)}
-        </>
-      };
+    const weakMap = new WeakMap<PlainObject, (param: any) => any>();
+    onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
+      const newData = [] as any[];
+      data.forEach(item => {
+        newData.push(item);
+        if (typeof item === "function") {return;}
+        if (utils.isExpand(item.data)) {
+          let dataFunc = weakMap.get(item.data);
+          if (!dataFunc) {
+            dataFunc = (param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index);
+            weakMap.set(item.data, dataFunc);
+          }
+          newData.push(dataFunc);
+        }
+      });
+      return { data: newData };
     }));
 
     /**
@@ -177,8 +175,8 @@ export const PlcExpand = designComponent({
                 </div>
               ),
               popper: () => <>
-                <DropdownOption label={i18n('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={methods.expandAll}/>
-                <DropdownOption label={i18n('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={methods.collapseAll}/>
+                <DropdownOption label={i18n.$it('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={methods.expandAll}/>
+                <DropdownOption label={i18n.$it('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={methods.collapseAll}/>
               </>
             }}
           </Dropdown>

package/src/packages/components/Table/standard/PlcIndex.tsx

@@ -17,7 +17,7 @@ export const PlcIndex = designComponent({
       noFilter: true,
       noSort: true,
     }),
-    summaryText: { type: String, default: () => i18n('base.edit.summary').d('合计') },
+    summaryText: { type: String, default: () => i18n.$it('base.edit.summary').d('合计') },
     start: { type: Number, default: 0 },
   },
   scopeSlots: PlcScopeSlotsOptions,

package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx

@@ -62,7 +62,7 @@ export const OuterOperation = designComponent({
       let outerOperationConfigs: iTableOuterOperationConfig[] = props.operations?.filter(i => !i.position || i.position === eTableOperationPosition.outer) as any;
       outerOperationConfigs = props.processOuterOperations?.(outerOperationConfigs) || outerOperationConfigs || [];
       outerOperationConfigs.forEach(i => {
-        const { position, handler, keyboard, render } = i;
+        const { position, handler, keyboard, render, dropdown } = i;
         const type = typeof i.type === "function" ? i.type() : i.type || 'other';
         const operation: iTableOuterOperation = {
           label: typeof i.label === "function" ? i.label() : i.label,
@@ -73,6 +73,7 @@ export const OuterOperation = designComponent({
           type,
           disabled: typeof i.disabled === "function" ? i.disabled() : !!i.disabled,
           position,
+          dropdown,
           handler,
           mode: typeof i.mode === "function" ? i.mode() : i.mode,
           status: typeof i.status === "function" ? i.status() : i.status,
@@ -112,8 +113,8 @@ export const OuterOperation = designComponent({
           <div className="table-operation-bar-right">
             {(() => {
               const outerButtonSize = 3;
-              const exposeOuterButtons = outerOperations.value.slice(0, outerButtonSize);
-              const hiddenOuterButtons = outerOperations.value.slice(outerButtonSize);
+              const exposeOuterButtons = outerOperations.value.filter(i => !i.dropdown);
+              const hiddenOuterButtons = outerOperations.value.filter(i => i.dropdown);
               const renderContent: RenderNode[] = [];
               const exposeOuterButtonsContent = exposeOuterButtons.map(operation => {
                 const btn = operation.render ? operation.render(false) : (
@@ -165,7 +166,7 @@ export const OuterOperation = designComponent({
                       v-slots={{
                         default: () => (
                           <ButtonGroup>
-                            <Button label={i18n('base.more').d('更多')}/>
+                            <Button label={i18n.$it('base.more').d('更多')}/>
                             <Button icon="pi-down"/>
                           </ButtonGroup>
                         ),

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -14,7 +14,7 @@ import {DropdownOption} from "../../../DropdownOption";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
 import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
 import i18n from "../../../i18n";
-import {pick} from "../../../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 
 export const PlcOperation = designComponent({
   name: 'plc-operation',
@@ -25,7 +25,7 @@ export const PlcOperation = designComponent({
       width: null as any,
       align: 'left',
       hideInForm: true,
-      title: (() => i18n('base.operation').d('操作')) as any,
+      title: (() => i18n.$it('base.operation').d('操作')) as any,
       noFilter: true,
       noSort: true,
     }),
@@ -183,7 +183,7 @@ export const PlcOperation = designComponent({
     const predicateWidth = computed((): number => {
       if (innerOperationConfigs.value.length === 0) {return 0;}
       return innerOperationConfigs.value.reduce((prev) => {
-        return prev + 2 * 14 + 12;
+        return prev + 2 * 14 + 13;
       }, 0) + 24;
     });
 
@@ -281,7 +281,7 @@ export const PlcOperation = designComponent({
      * @author  韦胜健
      * @date    2022.11.25 19:20
      */
-    effects.push(table.hooks.onVirtualPageIndexChange.use(({ start }) => {state.virtualRowStart = start;}));
+    effects.push(table.hooks.onVirtualPageIndexChange.use(({ startIndex }) => {state.virtualRowStart = startIndex;}));
 
     onBeforeUnmount(() => effects.clear());
 
@@ -305,13 +305,13 @@ export const PlcOperation = designComponent({
                       <Button
                         mode="text"
                         key="save"
-                        label={i18n('base.edit.save').d('保存')}
+                        label={i18n.$it('base.edit.save').d('保存')}
                         onClick={() => event.emit.onClickNodeSaveOperation(node)}
                       />
                       <Button
                         mode="text"
                         key="cancel"
-                        label={i18n('base.cancel').d('取消')}
+                        label={i18n.$it('base.cancel').d('取消')}
                         onClick={() => event.emit.onClickNodeCancelOperation(node)}
                       />
                     </>;
@@ -349,7 +349,7 @@ export const PlcOperation = designComponent({
                               mode="text"
                               key="more"
                             >
-                              <span>{i18n('base.more').d('更多')}</span>
+                              <span>{i18n.$it('base.more').d('更多')}</span>
                               <Icon icon="pi-down"/>
                             </Button>
                           ),

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.utils.tsx

@@ -50,6 +50,8 @@ type iBuildTableOperationConfig<Scope = never, IsConfig = true> = {
       keyboard?: string,
       /*外部按钮可以不用设置position，默认按钮就是外部的*/
       position?: typeof eTableOperationPosition.outer,
+      /*是否放在更多按钮里边*/
+      dropdown?: boolean,
       handler?: () => any,
       render?: (isDropdown: boolean) => RenderNode
     }) :

package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss

@@ -6,7 +6,7 @@
 
     .table-operation-bar-left {
       flex: 1;
-      overflow: hidden;
+      //overflow: hidden;
       white-space: nowrap;
       text-align: left;
     }
@@ -16,11 +16,13 @@
 @include comp(auto-table) {
   @include sizeMixin(auto-table, ()) {
     .table-operation-bar {
-      margin-bottom: $margin;
+      margin-bottom: 0;
 
       .table-operation-bar-right {
+        margin-left: $margin;
+
         & > * + * {
-          margin-left: calc(#{$margin} - 8px);
+          margin-left: calc(#{$margin});
         }
 
         & > .#{componentName(button-group)} {

package/src/packages/components/Table/standard/PlcTree/PlcTree.renderNode.tsx

@@ -40,11 +40,11 @@ export function usePlcTreeRenderNode(
   const renderTreeHead = () => (
     <>
       <PlcTreeHeader table={table} buttonStyles={buttonStyles.value} getPlcRefer={getPlcRefer}>
-        <DropdownOption label={i18n('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={treeCore.methods.expandAll}/>
-        <DropdownOption label={i18n('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={treeCore.methods.collapseAll}/>
+        <DropdownOption label={i18n.$it('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={treeCore.methods.expandAll}/>
+        <DropdownOption label={i18n.$it('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={treeCore.methods.collapseAll}/>
         {props.multiple && <>
-          <DropdownOption label={i18n('table.checkAll').d('全部选中')} icon="pi-select-all" onClick={treeCore.methods.checkAll}/>
-          <DropdownOption label={i18n('table.clearAll').d('清空选中')} icon="pi-unordered-list" onClick={treeCore.methods.unCheckAll}/>
+          <DropdownOption label={i18n.$it('table.checkAll').d('全部选中')} icon="pi-select-all" onClick={treeCore.methods.checkAll}/>
+          <DropdownOption label={i18n.$it('table.clearAll').d('清空选中')} icon="pi-unordered-list" onClick={treeCore.methods.unCheckAll}/>
         </>}
       </PlcTreeHeader>
       {props.title}
@@ -58,6 +58,9 @@ export function usePlcTreeRenderNode(
    */
   const renderTreeNode = (renderScope: iTableCellRenderScope) => {
     const treeNode = treeCore.flatNodeComputedData.value[renderScope.node.state.index];
+    if (!treeNode) {
+      return null;
+    }
     return (
       <RenderPlcTreeNode
         treeCore={treeCore}

package/src/packages/components/Table/standard/PlcTree/PlcTree.tsx

@@ -10,7 +10,7 @@ import {usePlcTreeAutoWidth} from "./PlcTree.autoWidth";
 import {CheckboxStatus} from "../../../../utils/constant";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {iTableNode} from "../../table/utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
+import {findParentElement} from "plain-utils/dom/findParentElement";
 import {hasClass} from "plain-utils/dom/hasClass";
 
 export const PlcTree = designComponent({

package/src/packages/components/Table/standard/PlcTree/PlcTree.utils.ts

@@ -1,5 +1,5 @@
 import {ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
-import {omit} from "../../../../utils/omit";
+import {omit} from "plain-utils/object/omit";
 import {TreePropsOptions} from "../../../TreeCore/createTreeProps";
 import {createPlcPropOptions} from "../../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -80,6 +80,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.multiple && (
               <div className={`tree-node-checker plc-tree-button`}>
                 <Checkbox
+                  key={props.treeNode.id}
                   checkStatus={checkStatus.value}
                   disabled={!props.treeNode.isCheckAble()}
                   onClick={handler.onClickCheckbox}
@@ -89,7 +90,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.draggable && (
               <div
                 className={classnames(['tree-node-draggier', 'plc-tree-button', { 'tree-node-draggier-disable': !props.treeCore.utils.isAllowDraggable(props.treeNode) }])}
-                onMouseDown={handler.onMousedownDraggier.value}
+                onMouseDown={props.treeNode.empty ? undefined : handler.onMousedownDraggier.value}
               >
                 <Icon icon="pi-menu"/>
               </div>

package/src/packages/components/Table/table/Table.tsx

@@ -108,6 +108,8 @@ export const Table = designComponent({
      */
     const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
 
+    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
+
     const showRows = computed((): number => {
       const bodyRows = bodyNodes.value.length;
       if (props.showRows === 'auto') {
@@ -234,6 +236,7 @@ export const Table = designComponent({
     /*---------------------------------------内置hooks-------------------------------------------*/
 
     hooks.onRender.use({
+      separate: false,
       processor: ({ list, render }) => {!bodyNodes.value.length && list.push({ render, key: 'empty', seq: 4 });},
       render: () => (
         <div className="table-empty">
@@ -323,9 +326,10 @@ export const Table = designComponent({
               <VirtualTable
                 ref={onRefVirtual}
                 height={tableHeight.value || undefined}
-                data={bodyNodes.value}
+                data={tableBodyNodes.value}
                 headData={plcData.value?.headPlcListArray}
                 size={numberState.bodyRowHeight}
+                dynamicSize={props.dynamicSize}
                 headSize={numberState.headRowHeight}
                 width={plcData.value!.targetTableWidth!}
                 summaryData={summaryNodes.value}
@@ -351,8 +355,12 @@ export const Table = designComponent({
                       </tr>
                     ))
                   ),
-                  default: ({ item, index, virtualIndex }) => (
-                    <PltRow table={refer} node={item} vid={index} key={virtualIndex}/>
+                  default: ({ item, vid, vIndex, index }) => (
+                    typeof item !== "function" ? (
+                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
+                    ) : (
+                      item({ vid, vIndex, index })
+                    )
                   ),
                 }}
               />

package/src/packages/components/Table/table/body/cell.tsx

@@ -127,24 +127,29 @@ export const PltCell = designComponent({
          * @author  韦胜健
          * @date    2023.1.20 14:00
          */
+        const emptyOverflowTooltipOption = { reference: null, message: null, };
         const overflowTooltip = createTooltip({
           overflow: true,
           /*当没有message时注销监听鼠标事件*/
           ignoreEmptyMessage: false,
           tooltip: () => {
             const bodyCell = getBodyCell();
-            return ({
-              /*
-              * 没有开启overflowTooltip
-              * 或者没有初始化getBodyCell
-              * 或者没有bodyCell
-              * 或者当前处于编辑状态
-              *
-              * 则不显示overflowTooltip
-              */
-              reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
-              message: bodyCell?.body,
-            });
+            /*
+             * 没有开启overflowTooltip
+             * 或者没有初始化getBodyCell
+             * 或者没有bodyCell
+             * 或者当前处于编辑状态
+             *
+             * 则不显示overflowTooltip
+             */
+            if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
+              return emptyOverflowTooltipOption
+            } else {
+              return {
+                reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
+                message: bodyCell?.body,
+              };
+            }
           },
         }, popup);
         effects.push(overflowTooltip.clear);

package/src/packages/components/Table/table/body/row.tsx

@@ -34,7 +34,7 @@ export const PltRow = designComponent({
       render: () => {
         return props.table.hooks.onRenderRow.exec({
           content: (
-            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} {...handler}>
+            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} data-idx={String(props.node.state.index == null ? "" : props.node.state.index)} {...handler}>
               {(props.table.bodyPlcList.value?.map((plc) => <PltCell key={plc.plcKey} table={props.table} node={props.node} plc={plc}/>))}
             </tr>
           ),

package/src/packages/components/Table/table/body/useCellValue.tsx

@@ -84,13 +84,17 @@ export function useCellValue(
           };
           (async () => {
             try {
+              const sv = sourceValue.value;
+              const sr = row.value;
               const value = await asyncFormatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
-              asyncState.asyncValue = {
-                sourceValue: sourceValue.value,
-                row: row.value,
-                targetValue: value,
-                loading: false,
-              };
+              if (sv === sourceValue.value && sr === row.value) {
+                asyncState.asyncValue = {
+                  sourceValue: sourceValue.value,
+                  row: row.value,
+                  targetValue: value,
+                  loading: false,
+                };
+              }
             } catch (e) {
               /*异步格式化失败*/
               console.error(e);