vxe-table 3.12.13 → 3.12.15

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

@@ -5,8 +5,20 @@ import { getCellValue, setCellValue, getRowid } from '../../src/util'
 import { browse, removeClass, addClass } from '../../../ui/src/dom'
 import { warnLog, errLog } from '../../../ui/src/log'
 
+import type { VxeTableConstructor, TableReactData } from '../../../../types'
+
 const { getConfig, renderer, getI18n } = VxeUI
 
+function removeCellSelectedClass ($xeTable: VxeTableConstructor) {
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (el) {
+    const cell = el.querySelector('.col--selected')
+    if (cell) {
+      removeClass(cell, 'col--selected')
+    }
+  }
+}
+
 function insertTreeRow (_vm: any, newRecords: any[], isAppend: any) {
   const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm
   const { rowField, parentField, mapChildrenField } = treeOpts
@@ -291,7 +303,7 @@ export default {
       const treeOpts = $xeTable.computeTreeOpts
       const { transform, mapChildrenField } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
-      const { actived, removeList, insertMaps } = editStore
+      const { actived, removeMaps, insertMaps } = editStore
       const { checkField } = checkboxOpts
       let delList: any[] = []
       if (!rows) {
@@ -302,7 +314,8 @@ export default {
       // 如果是新增，则保存记录
       rows.forEach(row => {
         if (!$xeTable.isInsertByRow(row)) {
-          removeList.push(row)
+          const rowid = getRowid($xeTable, row)
+          removeMaps[rowid] = row
         }
       })
       // 如果绑定了多选属性，则更新状态
@@ -462,7 +475,16 @@ export default {
      * 获取已删除的数据
      */
     _getRemoveRecords () {
-      return this.editStore.removeList
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { editStore } = reactData
+      const { removeMaps } = editStore
+      const removeRecords: any[] = []
+      XEUtils.each(removeMaps, (row) => {
+        removeRecords.push(row)
+      })
+      return removeRecords
     },
     /**
      * 获取更新数据
@@ -643,11 +665,6 @@ export default {
       }
       focused.row = null
       focused.column = null
-      $xeTable.$nextTick(() => {
-        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
-          return $xeTable.handleRecalculateCellAreas()
-        }
-      })
       if (validOpts.autoClear) {
         if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
           if ($xeTable.clearValidate) {
@@ -655,7 +672,11 @@ export default {
           }
         }
       }
-      return $xeTable.$nextTick()
+      return $xeTable.$nextTick().then(() => {
+        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+          return $xeTable.handleRecalculateCellAreas()
+        }
+      })
     },
     _getActiveRecord () {
       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -820,7 +841,7 @@ export default {
             selected.row = row
             selected.column = column
             if (isMouseSelected) {
-              this.addColSdCls()
+              this.addCellSelectedClass()
             }
             this.focus()
             if (evnt) {
@@ -846,11 +867,13 @@ export default {
      * 清除所选中源状态
      */
     _clearSelected () {
+      const $xeTable = this
+
       const { selected } = this.editStore
       selected.row = null
       selected.column = null
       this.reColTitleSdCls()
-      this.reColSdCls()
+      removeCellSelectedClass($xeTable)
       return this.$nextTick()
     },
     reColTitleSdCls () {
@@ -859,18 +882,16 @@ export default {
         XEUtils.arrayEach(headerElem.querySelectorAll('.col--title-selected'), elem => removeClass(elem, 'col--title-selected'))
       }
     },
-    reColSdCls () {
-      const cell = this.$el.querySelector('.col--selected')
-      if (cell) {
-        removeClass(cell, 'col--selected')
-      }
-    },
-    addColSdCls () {
-      const { selected } = this.editStore
+    addCellSelectedClass () {
+      const $xeTable = this
+      const reactData = $xeTable as TableReactData
+
+      const { editStore } = reactData
+      const { selected } = editStore
       const { row, column } = selected
-      this.reColSdCls()
+      removeCellSelectedClass($xeTable)
       if (row && column) {
-        const cell = this.getCellElement(row, column)
+        const cell = $xeTable.getCellElement(row, column)
         if (cell) {
           addClass(cell, 'col--selected')
         }

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

@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../src/util'
 import { parseFile, formatText, eqEmptyValue } from '../../../ui/src/utils'
+import { hasClass } from '../../../ui/src/dom'
 import { createHtmlPage, getExportBlobByContent } from './util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
@@ -132,7 +133,7 @@ function getBodyLabelData ($xeTable: VxeTableConstructor, opts: VxeTablePropType
                     cellValue = htmlCellElem.innerText.trim()
                   } else {
                     const cell = $xeTable.getCellElement(row, column)
-                    if (cell) {
+                    if (cell && !hasClass(cell, 'is--progress')) {
                       cellValue = cell.innerText.trim()
                     }
                   }
@@ -190,7 +191,7 @@ function getBodyLabelData ($xeTable: VxeTableConstructor, opts: VxeTablePropType
                 cellValue = htmlCellElem.innerText.trim()
               } else {
                 const cell = $xeTable.getCellElement(row, column)
-                if (cell) {
+                if (cell && !hasClass(cell, 'is--progress')) {
                   cellValue = cell.innerText.trim()
                 }
               }

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,17 @@ 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 { editStore, pendingRowMaps } = reactData
+      const { afterFullData } = internalData
+      const { removeMaps } = editStore
+      const treeOpts = $xeTable.computeTreeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       let validList
       if (rows === true) {
@@ -178,6 +187,15 @@ export default {
       if (editRules) {
         const columns = cols && cols.length ? cols : this.getColumns()
         const handleVaild = (row: any) => {
+          const rowid = getRowid($xeTable, row)
+          // 是否删除
+          if (removeMaps[rowid]) {
+            return
+          }
+          // 是否标记删除
+          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/body.ts

@@ -403,6 +403,7 @@ function renderTdColumn (
         'fixed--width': !isAutoCellWidth,
         'fixed--hidden': fixedHiddenColumn,
         'is--padding': isCellPadding,
+        'is--progress': (fixedHiddenColumn && isAllOverflow) || isVNPreEmptyStatus,
         'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
         'is--drag-disabled': isDisabledDrag,
         'col--dirty': isDirty,

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> = {}