vxe-table 4.23.8 → 4.23.9

package/es/table/src/body.js

@@ -23,7 +23,29 @@ var body_default = defineVxeComponent({
   setup(props) {
     const $xeTable = inject("$xeTable", {});
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts, computeIsBodyRenderOptimize, computeRendererOpts } = $xeTable.getComputeMaps();
+    const {
+      computeEditOpts,
+      computeMouseOpts,
+      computeCellOffsetWidth,
+      computeAreaOpts,
+      computeDefaultRowHeight,
+      computeEmptyOpts,
+      computeTooltipOpts,
+      computeRadioOpts,
+      computeExpandOpts,
+      computeTreeOpts,
+      computeCheckboxOpts,
+      computeCellOpts,
+      computeValidOpts,
+      computeRowOpts,
+      computeColumnOpts,
+      computeRowDragOpts,
+      computeResizableOpts,
+      computeVirtualXOpts,
+      computeVirtualYOpts,
+      computeIsBodyRenderOptimize,
+      computeRendererOpts
+    } = $xeTable.getComputeMaps();
     const refElem = ref();
     const refBodyScroll = ref();
     const refBodyTable = ref();
@@ -72,19 +94,23 @@ var body_default = defineVxeComponent({
           lineHeight = `calc(-1em + ${Math.floor(cellHeight / 2 + getCellRestHeight(parentRowRest, cellOpts, rowOpts, defaultRowHeight) / 2)}px)`;
         }
         return [
-          h("div", {
-            key: "tl",
-            class: "vxe-tree--line-wrapper"
-          }, [
-            h("div", {
-              class: "vxe-tree--line",
-              style: {
-                height: lineHeight,
-                bottom: `-${Math.floor(cellHeight / 2)}px`,
-                left: `calc(${rLevel * treeOpts.indent}px + 1em)`
-              }
-            })
-          ])
+          h(
+            "div",
+            {
+              key: "tl",
+              class: "vxe-tree--line-wrapper"
+            },
+            [
+              h("div", {
+                class: "vxe-tree--line",
+                style: {
+                  height: lineHeight,
+                  bottom: `-${Math.floor(cellHeight / 2)}px`,
+                  left: `calc(${rLevel * treeOpts.indent}px + 1em)`
+                }
+              })
+            ]
+          )
         ];
       }
       return [];
@@ -317,11 +343,14 @@ var body_default = defineVxeComponent({
         tdVNs.push(
           h("div", {
             key: "tc",
-            class: ["vxe-cell", {
-              "c--title": showTitle,
-              "c--tooltip": showTooltip,
-              "c--ellipsis": showEllipsis
-            }],
+            class: [
+              "vxe-cell",
+              {
+                "c--title": showTitle,
+                "c--tooltip": showTooltip,
+                "c--ellipsis": showEllipsis
+              }
+            ],
             style: tcStyle
           })
         );
@@ -332,47 +361,70 @@ var body_default = defineVxeComponent({
         const clVNs = [];
         if (!isVNPreEmptyStatus) {
           clVNs.push(
-            h("div", {
-              colid,
-              rowid,
-              class: "vxe-cell--wrapper vxe-body-cell--wrapper"
-            }, column.renderCell(cellParams))
+            h(
+              "div",
+              {
+                colid,
+                rowid,
+                class: "vxe-cell--wrapper vxe-body-cell--wrapper"
+              },
+              column.renderCell(cellParams)
+            )
           );
         }
         tdVNs.push(
-          h("div", {
-            key: "tc",
-            class: ["vxe-cell", {
-              "c--title": showTitle,
-              "c--tooltip": showTooltip,
-              "c--ellipsis": showEllipsis
-            }],
-            style: tcStyle,
-            title: showTitle ? $xeTable.getCellLabel(row, column) : null
-          }, clVNs)
+          h(
+            "div",
+            {
+              key: "tc",
+              class: [
+                "vxe-cell",
+                {
+                  "c--title": showTitle,
+                  "c--tooltip": showTooltip,
+                  "c--ellipsis": showEllipsis
+                }
+              ],
+              style: tcStyle,
+              title: showTitle ? $xeTable.getCellLabel(row, column) : null
+            },
+            clVNs
+          )
         );
         if (showValidTip && errorValidItem) {
           const errRule = errorValidItem.rule;
           const validSlot = slots ? slots.valid : null;
           const validParams = { ...cellParams, ...errorValidItem, rule: errorValidItem };
           tdVNs.push(
-            h("div", {
-              key: "tcv",
-              class: ["vxe-cell--valid-error-tip", getPropClass(validOpts.className, validParams)],
-              style: errRule && errRule.maxWidth ? {
-                width: errRule.maxWidth + "px"
-              } : null
-            }, [
-              h("div", {
-                class: `vxe-cell--valid-error-wrapper vxe-cell--valid-error-theme-${validOpts.theme || "normal"}`
-              }, [
-                validSlot ? $xeTable.callSlot(validSlot, validParams) : [
-                  h("span", {
-                    class: "vxe-cell--valid-error-msg"
-                  }, errorValidItem.content)
-                ]
-              ])
-            ])
+            h(
+              "div",
+              {
+                key: "tcv",
+                class: ["vxe-cell--valid-error-tip", getPropClass(validOpts.className, validParams)],
+                style: errRule && errRule.maxWidth ? {
+                  width: errRule.maxWidth + "px"
+                } : null
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: `vxe-cell--valid-error-wrapper vxe-cell--valid-error-theme-${validOpts.theme || "normal"}`
+                  },
+                  [
+                    validSlot ? $xeTable.callSlot(validSlot, validParams) : [
+                      h(
+                        "span",
+                        {
+                          class: "vxe-cell--valid-error-msg"
+                        },
+                        errorValidItem.content
+                      )
+                    ]
+                  ]
+                )
+              ]
+            )
           );
         }
       }
@@ -384,9 +436,12 @@ var body_default = defineVxeComponent({
         tdVNs.push(
           h("div", {
             key: "tcc",
-            class: ["vxe-cell--col-resizable", {
-              "is--line": !border || border === "none"
-            }],
+            class: [
+              "vxe-cell--col-resizable",
+              {
+                "is--line": !border || border === "none"
+              }
+            ],
             onMousedown: (evnt) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
             onDblclick: (evnt) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
           })
@@ -402,47 +457,51 @@ var body_default = defineVxeComponent({
           })
         );
       }
-      return h("td", {
-        class: [
-          "vxe-table--column vxe-body--column",
-          colid,
-          cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : "",
-          cellAlign ? `col--${cellAlign}` : "",
-          type ? `col--${type}` : "",
-          {
-            "col--last": isLastColumn,
-            "col--tree-node": treeNode,
-            "col--edit": isEdit,
-            "col--ellipsis": hasEllipsis,
-            "col--cs-height": isCsHeight,
-            "col--rs-height": isRsHeight,
-            "col--to-row": showAreaRowStatus,
-            "col--auto-height": isVNAutoHeight,
-            "col--max-height": maxHeight,
-            "fixed--width": !isAutoCellWidth,
-            "fixed--hidden": fixedHiddenColumn,
-            "is--pg-top": isCellPaddingTop,
-            "is--pg-bottom": isCellPaddingBottom,
-            "is--pg-left": isCellPaddingLeft,
-            "is--pg-right": isCellPaddingRight,
-            "is--progress": fixedHiddenColumn && isAllOverflow || isVNPreEmptyStatus,
-            "is--drag-cell": isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
-            "is--drag-disabled": isDisabledDrag,
-            "col--dirty": isDirty,
-            "col--active": editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === "row")),
-            "col--valid-error": !!errorValidItem,
-            "show--valid-bg": errorValidItem && validOpts.showErrorBackground,
-            "col--current": currColFlag && currentCol === column
-          },
-          getPropClass(compCellClassName, cellParams),
-          getPropClass(className, cellParams),
-          getPropClass(allCellClassName, cellParams)
-        ],
-        key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
-        ...tdAttrs,
-        style: Object.assign({}, XEUtils.isFunction(compCellStyle) ? compCellStyle(cellParams) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(cellParams) : cellStyle),
-        ...tdOns
-      }, isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
+      return h(
+        "td",
+        {
+          class: [
+            "vxe-table--column vxe-body--column",
+            colid,
+            cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : "",
+            cellAlign ? `col--${cellAlign}` : "",
+            type ? `col--${type}` : "",
+            {
+              "col--last": isLastColumn,
+              "col--tree-node": treeNode,
+              "col--edit": isEdit,
+              "col--ellipsis": hasEllipsis,
+              "col--cs-height": isCsHeight,
+              "col--rs-height": isRsHeight,
+              "col--to-row": showAreaRowStatus,
+              "col--auto-height": isVNAutoHeight,
+              "col--max-height": maxHeight,
+              "fixed--width": !isAutoCellWidth,
+              "fixed--hidden": fixedHiddenColumn,
+              "is--pg-top": isCellPaddingTop,
+              "is--pg-bottom": isCellPaddingBottom,
+              "is--pg-left": isCellPaddingLeft,
+              "is--pg-right": isCellPaddingRight,
+              "is--progress": fixedHiddenColumn && isAllOverflow || isVNPreEmptyStatus,
+              "is--drag-cell": isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
+              "is--drag-disabled": isDisabledDrag,
+              "col--dirty": isDirty,
+              "col--active": editConfig && isEdit && actived.row === row && (actived.column === column || editOpts.mode === "row"),
+              "col--valid-error": !!errorValidItem,
+              "show--valid-bg": errorValidItem && validOpts.showErrorBackground,
+              "col--current": currColFlag && currentCol === column
+            },
+            getPropClass(compCellClassName, cellParams),
+            getPropClass(className, cellParams),
+            getPropClass(allCellClassName, cellParams)
+          ],
+          key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
+          ...tdAttrs,
+          style: Object.assign({}, XEUtils.isFunction(compCellStyle) ? compCellStyle(cellParams) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(cellParams) : cellStyle),
+          ...tdOns
+        },
+        isOptimizeMode && fixedHiddenColumn ? [] : tdVNs
+      );
     };
     const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
       const $xeGrid = $xeTable.xeGrid;
@@ -544,13 +603,17 @@ var body_default = defineVxeComponent({
           return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
         });
         rows.push(
-          h("tr", {
-            class: trClass,
-            rowid,
-            style: rowStyle ? XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
-            key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-            ...trOn
-          }, tdVNs)
+          h(
+            "tr",
+            {
+              class: trClass,
+              rowid,
+              style: rowStyle ? XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
+              key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+              ...trOn
+            },
+            tdVNs
+          )
         );
         if (isExpandRow) {
           const expandOpts = computeExpandOpts.value;
@@ -564,19 +627,23 @@ var body_default = defineVxeComponent({
               }
             }
             rows.push(
-              h("tr", {
-                class: "vxe-body--row-expanded-place",
-                key: `expand_${rowid}`,
-                rowid
-              }, [
-                h("td", {
-                  class: "vxe-body--row-expanded-place-column",
-                  colspan: tableColumn.length,
-                  style: {
-                    height: `${expHeight}px`
-                  }
-                })
-              ])
+              h(
+                "tr",
+                {
+                  class: "vxe-body--row-expanded-place",
+                  key: `expand_${rowid}`,
+                  rowid
+                },
+                [
+                  h("td", {
+                    class: "vxe-body--row-expanded-place-column",
+                    colspan: tableColumn.length,
+                    style: {
+                      height: `${expHeight}px`
+                    }
+                  })
+                ]
+              )
             );
           } else {
             const cellStyle = {};
@@ -623,29 +690,48 @@ var body_default = defineVxeComponent({
               items: []
             };
             rows.push(
-              h("tr", {
-                class: ["vxe-body--expanded-row", {
-                  "is--padding": padding
-                }],
-                key: `expand_${rowid}`
-              }, [
-                h("td", {
-                  class: ["vxe-body--expanded-column", {
-                    "fixed--hidden": fixedType && !hasFixedColumn,
-                    "col--ellipsis": hasEllipsis
-                  }],
-                  colspan: tableColumn.length
-                }, [
-                  h("div", {
-                    class: ["vxe-body--expanded-cell", {
-                      "is--ellipsis": expandHeight
-                    }],
-                    style: cellStyle
-                  }, [
-                    expandColumn.renderData(expandParams)
-                  ])
-                ])
-              ])
+              h(
+                "tr",
+                {
+                  class: [
+                    "vxe-body--expanded-row",
+                    {
+                      "is--padding": padding
+                    }
+                  ],
+                  key: `expand_${rowid}`
+                },
+                [
+                  h(
+                    "td",
+                    {
+                      class: [
+                        "vxe-body--expanded-column",
+                        {
+                          "fixed--hidden": fixedType && !hasFixedColumn,
+                          "col--ellipsis": hasEllipsis
+                        }
+                      ],
+                      colspan: tableColumn.length
+                    },
+                    [
+                      h(
+                        "div",
+                        {
+                          class: [
+                            "vxe-body--expanded-cell",
+                            {
+                              "is--ellipsis": expandHeight
+                            }
+                          ],
+                          style: cellStyle
+                        },
+                        [expandColumn.renderData(expandParams)]
+                      )
+                    ]
+                  )
+                ]
+              )
             );
           }
         }
@@ -764,101 +850,137 @@ var body_default = defineVxeComponent({
           emptyContent = tableProps.emptyText || getI18n("vxe.table.emptyText");
         }
       }
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-table--body-wrapper", fixedType ? `fixed-${fixedType}--wrapper` : "body--wrapper"],
-        xid: xID
-      }, [
-        h("div", {
-          ref: refBodyScroll,
-          class: "vxe-table--body-inner-wrapper",
-          onScroll(evnt) {
-            $xeTable.triggerBodyScrollEvent(evnt, fixedType);
-          }
-        }, [
-          fixedType ? renderEmptyElement($xeTable) : h("div", {
-            ref: refBodyXSpace,
-            class: "vxe-body--x-space"
-          }),
-          h("div", {
-            ref: refBodyYSpace,
-            class: "vxe-body--y-space"
-          }),
-          h("table", {
-            ref: refBodyTable,
-            class: "vxe-table--body",
-            xid: xID,
-            cellspacing: 0,
-            cellpadding: 0,
-            border: 0,
-            xvm: isOptimizeMode ? "1" : null
-          }, [
-            /**
-             * 列宽
-             */
-            h("colgroup", {
-              ref: refBodyColgroup
-            }, renderColumnList.map((column, $columnIndex) => {
-              return h("col", {
-                name: column.id,
-                key: $columnIndex,
-                style: {
-                  width: `${column.renderWidth}px`
-                }
-              });
-            })),
-            /**
-             * 内容
-             */
-            h("tbody", {
-              ref: refBodyTBody
-            }, renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList))
-          ]),
-          h("div", {
-            class: "vxe-table--checkbox-range"
-          }),
-          hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area ? h("div", {
-            class: "vxe-table--cell-area",
-            xid: xID
-          }, [
-            h("span", {
-              class: "vxe-table--cell-main-area"
-            }, mouseOpts.extension ? [
-              h("span", {
-                class: "vxe-table--cell-main-area-btn",
-                onMousedown(evnt) {
-                  if ($xeTable.triggerCellAreaExtendMousedownEvent) {
-                    $xeTable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xeTable, fixed: fixedType, type: renderType });
-                  }
-                }
-              })
-            ] : []),
-            h("span", {
-              class: "vxe-table--cell-clip-area"
-            }),
-            h("span", {
-              class: "vxe-table--cell-extend-area"
-            }),
-            h("span", {
-              class: "vxe-table--cell-multi-area"
-            }),
-            h("span", {
-              class: "vxe-table--cell-active-area"
-            }),
-            h("span", {
-              class: "vxe-table--cell-row-status-area"
-            })
-          ]) : renderEmptyElement($xeTable),
-          !fixedType ? h("div", {
-            class: "vxe-table--empty-block",
-            ref: refBodyEmptyBlock
-          }, [
-            h("div", {
-              class: "vxe-table--empty-content"
-            }, emptyContent)
-          ]) : renderEmptyElement($xeTable)
-        ])
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: ["vxe-table--body-wrapper", fixedType ? `fixed-${fixedType}--wrapper` : "body--wrapper"],
+          xid: xID
+        },
+        [
+          h(
+            "div",
+            {
+              ref: refBodyScroll,
+              class: "vxe-table--body-inner-wrapper",
+              onScroll(evnt) {
+                $xeTable.triggerBodyScrollEvent(evnt, fixedType);
+              }
+            },
+            [
+              fixedType ? renderEmptyElement($xeTable) : h("div", {
+                ref: refBodyXSpace,
+                class: "vxe-body--x-space"
+              }),
+              h("div", {
+                ref: refBodyYSpace,
+                class: "vxe-body--y-space"
+              }),
+              h(
+                "table",
+                {
+                  ref: refBodyTable,
+                  class: "vxe-table--body",
+                  xid: xID,
+                  cellspacing: 0,
+                  cellpadding: 0,
+                  border: 0,
+                  xvm: isOptimizeMode ? "1" : null
+                },
+                [
+                  /**
+                   * 列宽
+                   */
+                  h(
+                    "colgroup",
+                    {
+                      ref: refBodyColgroup
+                    },
+                    renderColumnList.map((column, $columnIndex) => {
+                      return h("col", {
+                        name: column.id,
+                        key: $columnIndex,
+                        style: {
+                          width: `${column.renderWidth}px`
+                        }
+                      });
+                    })
+                  ),
+                  /**
+                   * 内容
+                   */
+                  h(
+                    "tbody",
+                    {
+                      ref: refBodyTBody
+                    },
+                    renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList)
+                  )
+                ]
+              ),
+              h("div", {
+                class: "vxe-table--checkbox-range"
+              }),
+              hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area ? h(
+                "div",
+                {
+                  class: "vxe-table--cell-area",
+                  xid: xID
+                },
+                [
+                  h(
+                    "span",
+                    {
+                      class: "vxe-table--cell-main-area"
+                    },
+                    mouseOpts.extension ? [
+                      h("span", {
+                        class: "vxe-table--cell-main-area-btn",
+                        onMousedown(evnt) {
+                          if ($xeTable.triggerCellAreaExtendMousedownEvent) {
+                            $xeTable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xeTable, fixed: fixedType, type: renderType });
+                          }
+                        }
+                      })
+                    ] : []
+                  ),
+                  h("span", {
+                    class: "vxe-table--cell-clip-area"
+                  }),
+                  h("span", {
+                    class: "vxe-table--cell-extend-area"
+                  }),
+                  h("span", {
+                    class: "vxe-table--cell-multi-area"
+                  }),
+                  h("span", {
+                    class: "vxe-table--cell-active-area"
+                  }),
+                  h("span", {
+                    class: "vxe-table--cell-row-status-area"
+                  })
+                ]
+              ) : renderEmptyElement($xeTable),
+              !fixedType ? h(
+                "div",
+                {
+                  class: "vxe-table--empty-block",
+                  ref: refBodyEmptyBlock
+                },
+                [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-table--empty-content"
+                    },
+                    emptyContent
+                  )
+                ]
+              ) : renderEmptyElement($xeTable)
+            ]
+          )
+        ]
+      );
     };
     return renderVN;
   }