vxe-table 3.12.13 → 3.12.14

package/packages/table/module/validator/mixin.ts

@@ -5,7 +5,7 @@ import { scrollToView } from '../../../ui/src/dom'
 import { handleFieldOrColumn, getRowid } from '../../src/util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
-import type { VxeTableDefines } from '../../../../types'
+import type { VxeTableDefines, TableReactData, TableInternalData } from '../../../../types'
 
 const { getConfig, validators } = VxeUI
 
@@ -154,8 +154,16 @@ export default {
      * 返回 Promise 对象，或者使用回调方式
      */
     beginValidate (rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull: any) {
+      const $xeTable = this
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
       const validRest: any = {}
-      const { editRules, afterFullData, treeConfig, treeOpts } = this
+      const { editRules, treeConfig } = props
+      const { pendingRowMaps } = reactData
+      const { afterFullData } = internalData
+      const treeOpts = $xeTable.computeTreeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       let validList
       if (rows === true) {
@@ -178,6 +186,11 @@ export default {
       if (editRules) {
         const columns = cols && cols.length ? cols : this.getColumns()
         const handleVaild = (row: any) => {
+          const rowid = getRowid($xeTable, row)
+          // 是否标记删除
+          if (pendingRowMaps[rowid]) {
+            return
+          }
           if (isFull || !this.validRuleErr) {
             const colVailds: any[] = []
             columns.forEach((column: any) => {

package/packages/table/render/index.ts

@@ -6,7 +6,7 @@ import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils'
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
-import type { VxeGlobalRendererHandles, VxeColumnPropTypes } from '../../../types'
+import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
 const { getConfig, renderer, getI18n } = VxeUI
 
@@ -113,10 +113,15 @@ function getCellLabelVNs (h: CreateElement, renderOpts: any, params: any, cellLa
  * @param modelFunc
  * @param changeFunc
  */
-function getNativeElementOns (renderOpts: any, params: any, modelFunc?: any, changeFunc?: any) {
+function getNativeElementOns (renderOpts: any, params: any, eFns?: {
+  model: (evnt: Event) => void
+  change?: (evnt: Event) => void
+  blur?: (evnt: Event) => void
+}) {
   const { events } = renderOpts
   const modelEvent = getModelEvent(renderOpts)
   const changeEvent = getChangeEvent(renderOpts)
+  const { model: modelFunc, change: changeFunc, blur: blurFunc } = eFns || {}
   const isSameEvent = changeEvent === modelEvent
   const ons: any = {}
   if (events) {
@@ -138,16 +143,26 @@ function getNativeElementOns (renderOpts: any, params: any, modelFunc?: any, cha
     }
   }
   if (!isSameEvent && changeFunc) {
-    ons[getOnName(changeEvent)] = function (...args: any[]) {
-      changeFunc(...args)
+    ons[getOnName(changeEvent)] = function (evnt: Event) {
+      changeFunc(evnt)
       if (events && events[changeEvent]) {
-        events[changeEvent](params, ...args)
+        events[changeEvent](params, evnt)
+      }
+    }
+  }
+  if (blurFunc) {
+    ons[getOnName(blurEvent)] = function (evnt: Event) {
+      blurFunc(evnt)
+      if (events && events[blurEvent]) {
+        events[blurEvent](params, evnt)
       }
     }
   }
   return ons
 }
 
+const blurEvent = 'blur'
+
 /**
  * 组件事件处理
  * @param renderOpts
@@ -155,10 +170,15 @@ function getNativeElementOns (renderOpts: any, params: any, modelFunc?: any, cha
  * @param modelFunc
  * @param changeFunc
  */
-function getComponentOns (renderOpts: any, params: any, modelFunc?: any, changeFunc?: any) {
+function getComponentOns (renderOpts: any, params: any, eFns?: {
+  model: (cellValue: any) => void
+  change?: (...args: any[]) => void
+  blur?: (...args: any[]) => void
+}) {
   const { events } = renderOpts
   const modelEvent = getModelEvent(renderOpts)
   const changeEvent = getChangeEvent(renderOpts)
+  const { model: modelFunc, change: changeFunc, blur: blurFunc } = eFns || {}
   const ons: any = {}
   XEUtils.objectEach(events, (func, key: any) => {
     ons[getOnName(key)] = function (...args: any[]) {
@@ -186,68 +206,117 @@ function getComponentOns (renderOpts: any, params: any, modelFunc?: any, changeF
       }
     }
   }
+  if (blurFunc) {
+    ons[getOnName(blurEvent)] = function (...args: any[]) {
+      blurFunc(...args)
+      if (events && events[blurEvent]) {
+        events[blurEvent](params, ...args)
+      }
+    }
+  }
   return ons
 }
 
-function getEditOns (renderOpts: any, params: any) {
+function getEditOns (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderTableEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { $table, row, column } = params
   const { name } = renderOpts
   const { model } = column
   const isImmediate = isImmediateCell(renderOpts, params)
-  return getComponentOns(renderOpts, params, (cellValue: any) => {
-    // 处理 model 值双向绑定
-    model.update = true
-    model.value = cellValue
-    if (isImmediate) {
-      setCellValue(row, column, cellValue)
-    }
-  }, (eventParams: any) => {
-    // 处理 change 事件相关逻辑
-    if (!isImmediate && (['VxeInput', 'VxeNumberInput', 'VxeTextarea', '$input', '$textarea'].includes(name))) {
-      const cellValue = eventParams.value
+  return getComponentOns(renderOpts, params, {
+    model (cellValue) {
+      // 处理 model 值双向绑定
       model.update = true
       model.value = cellValue
-      $table.updateStatus(params, cellValue)
-    } else {
-      $table.updateStatus(params)
+      if (isImmediate) {
+        setCellValue(row, column, cellValue)
+      }
+    },
+    change (eventParams) {
+      // 处理 change 事件相关逻辑
+      if (!isImmediate && name && (['VxeInput', 'VxeNumberInput', 'VxeTextarea', '$input', '$textarea'].includes(name))) {
+        const cellValue = eventParams.value
+        model.update = true
+        model.value = cellValue
+        $table.updateStatus(params, cellValue)
+      } else {
+        $table.updateStatus(params)
+      }
+    },
+    blur () {
+      if (isImmediate) {
+        $table.handleCellRuleUpdateStatus('blur', params)
+      } else {
+        $table.handleCellRuleUpdateStatus('blur', params, model.value)
+      }
     }
   })
 }
 
 function getFilterOns (renderOpts: any, params: any, option: any) {
-  return getComponentOns(renderOpts, params, (value: any) => {
-    // 处理 model 值双向绑定
-    option.data = value
-  }, () => {
-    handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+  return getComponentOns(renderOpts, params, {
+    model (value) {
+      // 处理 model 值双向绑定
+      option.data = value
+    },
+    change () {
+      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+    },
+    blur () {
+      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+    }
   })
 }
 
 function getNativeEditOns (renderOpts: any, params: any) {
   const { $table, row, column } = params
   const { model } = column
-  return getNativeElementOns(renderOpts, params, (evnt: any) => {
-    // 处理 model 值双向绑定
-    const cellValue = evnt.target.value
-    if (isImmediateCell(renderOpts, params)) {
-      setCellValue(row, column, cellValue)
-    } else {
-      model.update = true
-      model.value = cellValue
+  return getNativeElementOns(renderOpts, params, {
+    model (evnt) {
+      // 处理 model 值双向绑定
+      const targetEl = evnt.target as HTMLInputElement
+      if (targetEl) {
+        const cellValue = targetEl.value
+        if (isImmediateCell(renderOpts, params)) {
+          setCellValue(row, column, cellValue)
+        } else {
+          model.update = true
+          model.value = cellValue
+        }
+      }
+    },
+    change (evnt) {
+      // 处理 change 事件相关逻辑
+      const targetEl = evnt.target as HTMLInputElement
+      if (targetEl) {
+        const cellValue = targetEl.value
+        $table.updateStatus(params, cellValue)
+      }
+    },
+    blur (evnt) {
+      const targetEl = evnt.target as HTMLInputElement
+      if (targetEl) {
+        const cellValue = targetEl.value
+        $table.updateStatus(params, cellValue)
+      }
     }
-  }, (evnt: any) => {
-    // 处理 change 事件相关逻辑
-    const cellValue = evnt.target.value
-    $table.updateStatus(params, cellValue)
   })
 }
 
 function getNativeFilterOns (renderOpts: any, params: any, option: any) {
-  return getNativeElementOns(renderOpts, params, (evnt: any) => {
-    // 处理 model 值双向绑定
-    option.data = evnt.target.value
-  }, () => {
-    handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+  return getNativeElementOns(renderOpts, params, {
+    model (evnt) {
+      // 处理 model 值双向绑定
+      const targetEl = evnt.target as HTMLInputElement
+      if (targetEl) {
+        option.data = targetEl.value
+      }
+    },
+    change () {
+      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+    },
+    blur () {
+      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+    }
   })
 }
 
@@ -280,7 +349,7 @@ function buttonCellRender (h: CreateElement, renderOpts: any, params: any) {
   ]
 }
 
-function defaultEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+function defaultEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { row, column } = params
   const cellValue = getCellValue(row, column)
   return [
@@ -291,7 +360,7 @@ function defaultEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandl
   ]
 }
 
-function radioAndCheckboxEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+function radioAndCheckboxEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { options } = renderOpts
   const { row, column } = params
   const cellValue = getCellValue(row, column)
@@ -310,7 +379,7 @@ function radioAndCheckboxEditRender (h: CreateElement, renderOpts: VxeGlobalRend
  * 已废弃
  * @deprecated
  */
-function oldEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+function oldEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { row, column } = params
   const cellValue = getCellValue(row, column)
   return [
@@ -776,7 +845,7 @@ renderer.mixin({
   },
   VxeColorPicker: {
     tableAutoFocus: 'input',
-    renderTableEdit (h, renderOpts, params) {
+    renderTableEdit (h, renderOpts, params: VxeGlobalRendererHandles.RenderTableEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
       const { row, column } = params
       const { options } = renderOpts
       const cellValue = getCellValue(row, column)
@@ -804,7 +873,7 @@ renderer.mixin({
   },
   VxeIconPicker: {
     tableAutoFocus: 'input',
-    renderTableEdit (h, renderOpts, params) {
+    renderTableEdit (h, renderOpts, params: VxeGlobalRendererHandles.RenderTableEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
       const { row, column } = params
       const { options } = renderOpts
       const cellValue = getCellValue(row, column)
@@ -840,7 +909,7 @@ renderer.mixin({
     renderTableDefault: defaultEditRender
   },
   VxeImage: {
-    renderTableDefault (h, renderOpts, params) {
+    renderTableDefault (h, renderOpts, params: VxeGlobalRendererHandles.RenderTableDefaultParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
       const { row, column } = params
       const { props } = renderOpts
       const cellValue = getCellValue(row, column)
@@ -856,7 +925,7 @@ renderer.mixin({
     }
   },
   VxeImageGroup: {
-    renderTableDefault (h, renderOpts, params) {
+    renderTableDefault (h, renderOpts, params: VxeGlobalRendererHandles.RenderTableDefaultParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
       const { row, column } = params
       const { props } = renderOpts
       const cellValue = getCellValue(row, column)
@@ -872,7 +941,7 @@ renderer.mixin({
     }
   },
   VxeTextEllipsis: {
-    renderTableDefault (h, renderOpts, params) {
+    renderTableDefault (h, renderOpts, params: VxeGlobalRendererHandles.RenderTableDefaultParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
       const { row, column } = params
       const { props } = renderOpts
       const cellValue = getCellValue(row, column)

package/packages/table/src/header.ts

@@ -89,8 +89,10 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
     let isVNPreEmptyStatus = false
-    if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-      isVNPreEmptyStatus = true
+    if (!isGroup) {
+      if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+        isVNPreEmptyStatus = true
+      }
     }
 
     const tcStyle: Record<string, string> = {}

package/packages/table/src/methods.ts

@@ -7,7 +7,7 @@ import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible,
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, TableInternalData, VxeTablePrivateMethods, VxeTooltipInstance } from '../../../types'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, TableInternalData, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
@@ -6121,13 +6121,13 @@ const Methods = {
   /**
    * 点击排序事件
    */
-  triggerSortEvent (evnt: any, column: any, order: any) {
+  triggerSortEvent (evnt: Event, column: VxeTableDefines.ColumnInfo, order: VxeTablePropTypes.SortOrder) {
     const $xeTable = this
 
     const sortOpts = $xeTable.computeSortOpts
     const { multiple, allowClear } = sortOpts
-    const { field, sortable, remoteSort } = column
-    if (sortable || remoteSort) {
+    const { field, sortable } = column
+    if (sortable || (column as any).remoteSort) {
       if (!order || column.order === order) {
         if (allowClear) {
           $xeTable.clearSort(multiple ? column : null)
@@ -6138,6 +6138,38 @@ const Methods = {
       $xeTable.handleColumnSortEvent(evnt, column)
     }
   },
+  handleCellRuleUpdateStatus (type: 'change' | 'blur', cellParams: {
+    row: any
+    column: VxeTableDefines.ColumnInfo
+  }, cellValue?: any) {
+    const $xeTable = this
+    const reactData = $xeTable as unknown as TableReactData
+
+    const { validStore } = reactData
+    const { row, column } = cellParams
+    if ($xeTable.hasCellRules) {
+      if ($xeTable.hasCellRules(type, row, column)) {
+        const cell = $xeTable.getCellElement(row, column)
+        if (cell) {
+          const customVal = !XEUtils.isUndefined(cellValue)
+          return $xeTable.validCellRules(type, row, column, cellValue)
+            .then(() => {
+              if (customVal && validStore.visible) {
+                setCellValue(row, column, cellValue)
+              }
+              $xeTable.clearValidate(row, column)
+            })
+            .catch(({ rule }: any) => {
+              if (customVal) {
+                setCellValue(row, column, cellValue)
+              }
+              $xeTable.showValidTooltip({ rule, row, column, cell })
+            })
+        }
+      }
+    }
+    return $xeTable.$nextTick()
+  },
   /**
    * 表头单元格按下事件
    */
@@ -8485,33 +8517,13 @@ const Methods = {
    * 如果单元格配置了校验规则，则会进行校验
    */
   updateStatus (slotParams: any, cellValue: any) {
-    const customVal = !XEUtils.isUndefined(cellValue)
+    const $xeTable = this
+    const props = $xeTable
+
     return this.$nextTick().then(() => {
-      const { $refs, editRules, validStore } = this
-      const refTableBody = $refs.refTableBody
-      if (slotParams && refTableBody && editRules) {
-        const { row, column } = slotParams
-        const type = 'change'
-        if (this.hasCellRules) {
-          if (this.hasCellRules(type, row, column)) {
-            const cell = this.getCellElement(row, column)
-            if (cell) {
-              return this.validCellRules(type, row, column, cellValue)
-                .then(() => {
-                  if (customVal && validStore.visible) {
-                    setCellValue(row, column, cellValue)
-                  }
-                  this.clearValidate(row, column)
-                })
-                .catch(({ rule }: any) => {
-                  if (customVal) {
-                    setCellValue(row, column, cellValue)
-                  }
-                  this.showValidTooltip({ rule, row, column, cell })
-                })
-            }
-          }
-        }
+      const { editRules } = props
+      if (slotParams && editRules) {
+        return $xeTable.handleCellRuleUpdateStatus('change', slotParams, cellValue)
       }
     })
   },

package/packages/table/src/table.ts

@@ -575,6 +575,13 @@ export default {
         isFooter: false
       },
 
+      rowHeightStore: {
+        default: 48,
+        medium: 44,
+        small: 40,
+        mini: 36
+      },
+
       scrollVMLoading: false,
 
       calcCellHeightFlag: 0,
@@ -686,12 +693,10 @@ export default {
       return this.computeRowHeightMaps
     },
     computeRowHeightMaps () {
-      return {
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      }
+      const $xeTable = this
+      const reactData = $xeTable as TableReactData
+
+      return reactData.rowHeightStore
     },
     computeDefaultRowHeight () {
       const $xeTable = this
@@ -1435,11 +1440,30 @@ export default {
   mounted () {
     const $xeTable = this
     const props = $xeTable
+    const reactData = $xeTable
 
+    const { rowHeightStore } = reactData
+    const varEl = $xeTable.$refs.refVarElem
     const columnOpts = $xeTable.computeColumnOpts
     const rowOpts = $xeTable.computeRowOpts
     const customOpts = $xeTable.computeCustomOpts
 
+    if (varEl) {
+      const [defEl, mediumEl, smallEl, miniEl] = varEl.children
+      if (defEl) {
+        rowHeightStore.default = defEl.clientHeight
+      }
+      if (mediumEl) {
+        rowHeightStore.medium = mediumEl.clientHeight
+      }
+      if (smallEl) {
+        rowHeightStore.small = smallEl.clientHeight
+      }
+      if (miniEl) {
+        rowHeightStore.mini = miniEl.clientHeight
+      }
+    }
+
     if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
       initTpImg()
     }
@@ -1596,6 +1620,23 @@ export default {
         class: 'vxe-table-slots',
         ref: 'hideColumn'
       }, this.$slots.default),
+      h('div', {
+        ref: 'refVarElem',
+        class: 'vxe-table-vars'
+      }, [
+        h('div', {
+          class: 'vxe-table-var-default'
+        }),
+        h('div', {
+          class: 'vxe-table-var-medium'
+        }),
+        h('div', {
+          class: 'vxe-table-var-small'
+        }),
+        h('div', {
+          class: 'vxe-table-var-mini'
+        })
+      ]),
       h('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'

package/styles/components/table.scss

@@ -7,6 +7,27 @@
   display: none;
 }
 
+.vxe-table-vars {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+  .vxe-table-var-default {
+    height: var(--vxe-ui-table-row-height-default);
+  }
+  .vxe-table-var-medium {
+    height: var(--vxe-ui-table-row-height-medium);
+  }
+  .vxe-table-var-small {
+    height: var(--vxe-ui-table-row-height-small);
+  }
+  .vxe-table-var-mini {
+    height: var(--vxe-ui-table-row-height-mini);
+  }
+}
+
 .vxe-table--print-frame {
   position: fixed;
   bottom: -100%;
@@ -1234,6 +1255,9 @@
         }
       }
     }
+    .vxe-cell--valid-error-tip {
+      padding: 0 var(--vxe-ui-table-cell-padding-medium);
+    }
   }
   &.size--small {
     font-size: var(--vxe-ui-font-size-small);
@@ -1265,6 +1289,9 @@
         }
       }
     }
+    .vxe-cell--valid-error-tip {
+      padding: 0 var(--vxe-ui-table-cell-padding-small);
+    }
   }
   &.size--mini {
     font-size: var(--vxe-ui-font-size-mini);
@@ -1296,6 +1323,9 @@
         }
       }
     }
+    .vxe-cell--valid-error-tip {
+      padding: 0 var(--vxe-ui-table-cell-padding-mini);
+    }
   }
 
   .vxe-header--column,
@@ -1894,8 +1924,7 @@
       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);
+      padding: 0 var(--vxe-ui-table-cell-padding-default);
     }
     .vxe-cell--valid-error-wrapper {
       display: inline-block;