vxe-table 4.8.4 → 4.8.6

package/packages/table/src/table.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, createCommentVNode, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, ComputedRef, onMounted } from 'vue'
+import { defineComponent, h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, ComputedRef, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
@@ -18,10 +18,10 @@ import TableImportPanelComponent from '../module/export/import-panel'
 import TableExportPanelComponent from '../module/export/export-panel'
 import TableMenuPanelComponent from '../module/menu/panel'
 
-import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf } from 'vxe-pc-ui'
+import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType } from 'vxe-pc-ui'
 import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes } from '../../../types'
 
-const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns } = VxeUI
+const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
 
 const isWebkit = browse['-webkit'] && !browse.edge
 
@@ -2271,7 +2271,9 @@ export default defineComponent({
           Promise.resolve(
             loadMethod({ $table: $xeTable, row })
           ).then((childRecords: any) => {
-            rowRest.treeLoaded = true
+            if (rowRest) {
+              rowRest.treeLoaded = true
+            }
             if (treeExpandLazyLoadedMaps[rowid]) {
               delete treeExpandLazyLoadedMaps[rowid]
             }
@@ -2297,7 +2299,9 @@ export default defineComponent({
             }
           }).catch(() => {
             const { treeExpandLazyLoadedMaps } = reactData
-            rowRest.treeLoaded = false
+            if (rowRest) {
+              rowRest.treeLoaded = false
+            }
             if (treeExpandLazyLoadedMaps[rowid]) {
               delete treeExpandLazyLoadedMaps[rowid]
             }
@@ -2335,10 +2339,14 @@ export default defineComponent({
           rowExpandLazyLoadedMaps[rowid] = row
           loadMethod({ $table: $xeTable, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) }).then(() => {
             const { rowExpandedMaps } = reactData
-            rowRest.expandLoaded = true
+            if (rowRest) {
+              rowRest.expandLoaded = true
+            }
             rowExpandedMaps[rowid] = row
           }).catch(() => {
-            rowRest.expandLoaded = false
+            if (rowRest) {
+              rowRest.expandLoaded = false
+            }
           }).finally(() => {
             const { rowExpandLazyLoadedMaps } = reactData
             if (rowExpandLazyLoadedMaps[rowid]) {
@@ -2812,13 +2820,15 @@ export default defineComponent({
           const rowid = getRowid($xeTable, row)
           if (!treeTempExpandedMaps[rowid]) {
             const rowRest = fullAllDataRowIdData[rowid]
-            const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid]
-            // 是否使用懒加载
-            if (isLoad) {
-              result.push(handleAsyncTreeExpandChilds(row))
-            } else {
-              if (row[childrenField] && row[childrenField].length) {
-                treeTempExpandedMaps[rowid] = row
+            if (rowRest) {
+              const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid]
+              // 是否使用懒加载
+              if (isLoad) {
+                result.push(handleAsyncTreeExpandChilds(row))
+              } else {
+                if (row[childrenField] && row[childrenField].length) {
+                  treeTempExpandedMaps[rowid] = row
+                }
               }
             }
           }
@@ -3721,32 +3731,8 @@ export default defineComponent({
        * 如果已关联工具栏，则会同步更新
        */
       resetColumn (options) {
-        const { collectColumn } = internalData
-        const customOpts = computeCustomOpts.value
-        const { checkMethod } = customOpts
-        const opts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({
-          visible: true,
-          resizable: options === true,
-          fixed: options === true,
-          sort: options === true
-        }, options)
-        XEUtils.eachTree(collectColumn, (column) => {
-          if (opts.resizable) {
-            column.resizeWidth = 0
-          }
-          if (opts.fixed) {
-            column.fixed = column.defaultFixed
-          }
-          if (opts.sort) {
-            column.renderSortNumber = column.sortNumber
-          }
-          if (!checkMethod || checkMethod({ column })) {
-            column.visible = column.defaultVisible
-          }
-          column.renderResizeWidth = column.renderWidth
-        })
-        $xeTable.saveCustomStore('reset')
-        return tablePrivateMethods.handleCustom()
+        warnLog('vxe.error.delFunc', ['resetColumn', 'resetCustom'])
+        return $xeTable.resetCustom(options)
       },
       /**
        * 刷新列信息
@@ -5580,7 +5566,18 @@ export default defineComponent({
     }
 
     const updateRowDropTipContent = (tdEl: HTMLElement) => {
-      reactData.dragTipText = tdEl.textContent || ''
+      const { dragRow } = reactData
+      const dragOpts = computeDragOpts.value
+      const { rowTooltipMethod } = dragOpts
+      let tipContent = ''
+      if (rowTooltipMethod) {
+        tipContent = `${rowTooltipMethod({
+          row: dragRow
+        }) || ''}`
+      } else {
+        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || ''])
+      }
+      reactData.dragTipText = tipContent
     }
 
     /**
@@ -5615,6 +5612,18 @@ export default defineComponent({
       return nextTick()
     }
 
+    const callSlot = <T>(slotFunc: ((params: T) => VxeComponentSlotType | VxeComponentSlotType[]) | string | null, params: T): VxeComponentSlotType[] => {
+      if (slotFunc) {
+        if ($xeGrid) {
+          return $xeGrid.callSlot(slotFunc, params)
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc(params))
+        }
+      }
+      return []
+    }
+
     /**
      * 内部方法
      */
@@ -5623,17 +5632,7 @@ export default defineComponent({
         return getConfig()
       },
       updateAfterDataIndex,
-      callSlot (slotFunc, params) {
-        if (slotFunc) {
-          if ($xeGrid) {
-            return $xeGrid.callSlot(slotFunc, params)
-          }
-          if (XEUtils.isFunction(slotFunc)) {
-            return getSlotVNs(slotFunc(params))
-          }
-        }
-        return []
-      },
+      callSlot,
       /**
        * 获取父容器元素
        */
@@ -7079,7 +7078,7 @@ export default defineComponent({
             tableGroupColumn,
             fixedColumn
           })
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         h(TableBodyComponent, {
           ref: isFixedLeft ? refTableLeftBody : refTableRightBody,
           fixedType,
@@ -7095,7 +7094,7 @@ export default defineComponent({
             fixedColumn,
             fixedType
           })
-          : createCommentVNode()
+          : renderEmptyElement($xeTable)
       ])
     }
 
@@ -7123,7 +7122,7 @@ export default defineComponent({
 
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
+      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore, dragRow, dragTipText } = reactData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tipConfig = computeTipConfig.value
@@ -7131,6 +7130,7 @@ export default defineComponent({
       const checkboxOpts = computeCheckboxOpts.value
       const treeOpts = computeTreeOpts.value
       const rowOpts = computeRowOpts.value
+      const dragOpts = computeDragOpts.value
       const columnOpts = computeColumnOpts.value
       const vSize = computeSize.value
       const tableBorder = computeTableBorder.value
@@ -7140,6 +7140,8 @@ export default defineComponent({
       const isMenu = computeIsMenu.value
       const currLoading = reactData._isLoading || loading
       const virtualScrollBars = computeVirtualScrollBars.value
+      const dragSlots = dragOpts.slots || {}
+      const rowTipSlot = dragSlots.rowTip
       return h('div', {
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
@@ -7197,7 +7199,7 @@ export default defineComponent({
                 tableColumn,
                 tableGroupColumn
               })
-              : createCommentVNode(),
+              : renderEmptyElement($xeTable),
             /**
              * 表体
              */
@@ -7215,13 +7217,13 @@ export default defineComponent({
                 footerTableData,
                 tableColumn
               })
-              : createCommentVNode()
+              : renderEmptyElement($xeTable)
           ]),
           h('div', {
             class: 'vxe-table--fixed-wrapper'
           }, [
-            leftList && leftList.length && overflowX ? renderFixed('left') : createCommentVNode(),
-            rightList && rightList.length && overflowX ? renderFixed('right') : createCommentVNode()
+            leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
+            rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
           ])
         ]),
         virtualScrollBars.x
@@ -7241,7 +7243,7 @@ export default defineComponent({
               })
             ])
           ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         virtualScrollBars.y
           ? h('div', {
             key: 'vy',
@@ -7259,7 +7261,7 @@ export default defineComponent({
               })
             ])
           ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 空数据
          */
@@ -7307,7 +7309,7 @@ export default defineComponent({
                 default: () => loadingSlot({ $table: $xeTable, $grid: $xeGrid })
               }
             : {})
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 自定义列
          */
@@ -7317,7 +7319,7 @@ export default defineComponent({
             ref: refTableCustom,
             customStore
           })
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 筛选
          */
@@ -7327,7 +7329,7 @@ export default defineComponent({
             ref: refTableFilter,
             filterStore
           })
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 导入
          */
@@ -7337,7 +7339,7 @@ export default defineComponent({
             defaultOptions: reactData.importParams,
             storeData: reactData.importStore
           })
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 导出
          */
@@ -7347,7 +7349,7 @@ export default defineComponent({
             defaultOptions: reactData.exportParams,
             storeData: reactData.exportStore
           })
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 快捷菜单
          */
@@ -7356,16 +7358,18 @@ export default defineComponent({
             key: 'tm',
             ref: refTableMenu
           })
-          : createCommentVNode(),
+          : renderEmptyElement($xeTable),
         /**
          * 拖拽提示
          */
-        rowOpts.drag
+        rowOpts.drag && (dragRow || dragTipText)
           ? h('div', {
             ref: refRowDragTipElem,
-            class: 'vxe-table--row-drag-hint'
-          }, getI18n('vxe.table.dragTip', [reactData.dragTipText]))
-          : createCommentVNode(),
+            class: 'vxe-table--row-drag-tip'
+          }, rowTipSlot
+            ? (dragRow ? callSlot(rowTipSlot, { row: dragRow }) : [renderEmptyElement($xeTable)])
+            : (dragTipText ? [h('span', dragTipText)] : [renderEmptyElement($xeTable)]))
+          : renderEmptyElement($xeTable),
         /**
          * 提示相关
          */
@@ -7399,9 +7403,9 @@ export default defineComponent({
                 }, 'vxe-table--valid-error'],
                 ...(validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : {}) as any
               })
-              : createCommentVNode()
+              : renderEmptyElement($xeTable)
           ])
-          : createCommentVNode()
+          : renderEmptyElement($xeTable)
       ])
     }
 

package/packages/ui/index.ts

@@ -58,7 +58,8 @@ VxeUI.setConfig({
       autoClear: true,
       autoPos: true,
       message: 'inline',
-      msgMode: 'single'
+      msgMode: 'single',
+      theme: 'normal'
     },
     columnConfig: {
       maxFixedSize: 4

package/styles/components/table-module/custom.scss

@@ -94,15 +94,14 @@
   }
 }
 
-.vxe-table-custom--list-wrapper {
+.vxe-table-custom--body {
   display: block;
   flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.vxe-table-custom--header,
-.vxe-table-custom--body {
+.vxe-table-custom--panel-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -130,7 +129,7 @@
   user-select: none;
 }
 
-.vxe-table-custom--body {
+.vxe-table-custom--panel-list {
   padding: 0.2em 0;
   .vxe-table-custom--checkbox-option {
     &:hover {
@@ -139,7 +138,8 @@
   }
 }
 
-.vxe-table-custom--footer {
+.vxe-table-custom--footer-buttons {
+  width: 100%;
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
@@ -292,7 +292,8 @@
     text-align: center;
   }
   &.col--resizable {
-    & > .vxe-input {
+    & > .vxe-input,
+    & > .vxe-number-input {
       width: 100%;
     }
   }
@@ -390,3 +391,19 @@
   margin-left: 5px;
   cursor: help;
 }
+
+.vxe-table-custom-popup--table-col-seq {
+  width: 80px;
+}
+.vxe-table-custom-popup--table-col-sort {
+  width: 80px;
+}
+.vxe-table-custom-popup--table-col-title {
+  min-width: 120px;
+}
+.vxe-table-custom-popup--table-col-width {
+  width: 140px;
+}
+.vxe-table-custom-popup--table-col-fixed {
+  width: 200px;
+}

package/styles/components/table.scss

@@ -1299,7 +1299,7 @@
   .vxe-body--row-list-move {
     transition: transform 0.35s;
   }
-  .vxe-table--row-drag-hint {
+  .vxe-table--row-drag-tip {
     display: none;
     position: absolute;
     top: 0;
@@ -1427,30 +1427,40 @@
 
   /*校验不通过*/
   .vxe-body--column {
+    .vxe-cell--valid-error-tip {
+      width: 100%;
+      position: absolute;
+      left: 50%;
+      font-size: 12px;
+      line-height: 1.2em;
+      transform: translateX(-50%);
+      text-align: left;
+      z-index: 4;
+      padding-left: var(--vxe-ui-table-cell-padding-left);
+      padding-right: var(--vxe-ui-table-cell-padding-right);
+    }
+    .vxe-cell--valid-error-wrapper {
+      display: inline-block;
+      border-radius: var(--vxe-ui-border-radius);
+      pointer-events: auto;
+    }
+    .vxe-cell--valid-error-theme-beautify {
+      padding: 0.4em 0.8em;
+      color: #fff;
+      background-color: #f56c6c;
+      .vxe-cell--valid-error-msg {
+        background: transparent;
+      }
+    }
+    .vxe-cell--valid-error-theme-normal {
+      color: var(--vxe-ui-table-validate-error-color);
+      background-color: var(--vxe-ui-table-validate-error-background-color);
+    }
     &.col--active,
     &.col--selected {
       position: relative;
     }
     &.col--valid-error {
-      .vxe-cell--valid-error-hint {
-        width: 100%;
-        position: absolute;
-        left: 50%;
-        font-size: 12px;
-        line-height: 1.2em;
-        transform: translateX(-50%);
-        text-align: left;
-        z-index: 4;
-        padding-left: var(--vxe-ui-table-cell-padding-left);
-        padding-right: var(--vxe-ui-table-cell-padding-right);
-        .vxe-cell--valid-error-msg {
-          display: inline-block;
-          border-radius: var(--vxe-ui-border-radius);
-          color: var(--vxe-ui-table-validate-error-color);
-          background-color: var(--vxe-ui-table-validate-error-background-color);
-          pointer-events: auto;
-        }
-      }
       .vxe-default-input,
       .vxe-default-textarea,
       .vxe-default-select {
@@ -1465,11 +1475,11 @@
   &.valid-msg--single {
     .vxe-body--row {
       &:last-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           bottom: calc(100%);
         }
         &:first-child {
-          .vxe-cell--valid-error-hint {
+          .vxe-cell--valid-error-tip {
             bottom: auto;
           }
         }
@@ -1479,7 +1489,7 @@
   &.valid-msg--full {
     .vxe-body--row {
       &:last-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           top: calc(100% - 1.3em);
         }
       }
@@ -1489,7 +1499,7 @@
   &.old-cell-valid {
     .vxe-body--column {
       &.col--valid-error {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           width: 320px;
           position: absolute;
           bottom: calc(100% + 4px);
@@ -1511,7 +1521,7 @@
     }
     .vxe-body--row {
       &:first-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           bottom: auto;
           top: calc(100% + 4px);
         }
@@ -1519,7 +1529,7 @@
     }
     .vxe-body--column {
       &:first-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           left: 10px;
           transform: translateX(0);
           text-align: left;