vxe-table 4.10.13 → 4.10.15-beta.0

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

@@ -6,7 +6,7 @@ import { getCellValue, setCellValue, getRowid } from '../../src/util'
 import { browse, removeClass, addClass } from '../../../ui/src/dom'
 import { warnLog, errLog } from '../../../ui/src/log'
 
-import type { TableEditMethods, TableEditPrivateMethods } from '../../../../types'
+import type { TableEditMethods, TableEditPrivateMethods, VxeTableDefines } from '../../../../types'
 
 const { getConfig, renderer, hooks, getI18n } = VxeUI
 
@@ -21,7 +21,7 @@ hooks.add('tableEditModule', {
     let editMethods = {} as TableEditMethods
     let editPrivateMethods = {} as TableEditPrivateMethods
 
-    const getEditColumnModel = (row: any, column: any) => {
+    const getEditColumnModel = (row: any, column: VxeTableDefines.ColumnInfo) => {
       const { model, editRender } = column
       if (editRender) {
         model.value = getCellValue(row, column)
@@ -29,7 +29,7 @@ hooks.add('tableEditModule', {
       }
     }
 
-    const setEditColumnModel = (row: any, column: any) => {
+    const setEditColumnModel = (row: any, column: VxeTableDefines.ColumnInfo) => {
       const { model, editRender } = column
       if (editRender && model.update) {
         setCellValue(row, column, model.value)
@@ -48,21 +48,21 @@ hooks.add('tableEditModule', {
       }
     }
 
-    function syncActivedCell () {
+    const syncActivedCell = () => {
       const { editStore, tableColumn } = reactData
       const editOpts = computeEditOpts.value
       const { actived } = editStore
       const { row, column } = actived
       if (row || column) {
         if (editOpts.mode === 'row') {
-          tableColumn.forEach((column: any) => setEditColumnModel(row, column))
+          tableColumn.forEach((column) => setEditColumnModel(row, column))
         } else {
           setEditColumnModel(row, column)
         }
       }
     }
 
-    function insertTreeRow (newRecords: any[], isAppend: boolean) {
+    const insertTreeRow = (newRecords: any[], isAppend: boolean) => {
       const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
       const treeOpts = computeTreeOpts.value
       const { rowField, parentField, mapChildrenField } = treeOpts
@@ -86,7 +86,7 @@ hooks.add('tableEditModule', {
           }
           parentChilds[funcName](item)
           mapChilds[funcName](item)
-          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0 }
+          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
           fullDataRowIdData[rowid] = rest
           fullAllDataRowIdData[rowid] = rest
         } else {
@@ -97,7 +97,7 @@ hooks.add('tableEditModule', {
           }
           afterFullData[funcName](item)
           tableFullTreeData[funcName](item)
-          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
+          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
           fullDataRowIdData[rowid] = rest
           fullAllDataRowIdData[rowid] = rest
         }
@@ -122,7 +122,7 @@ hooks.add('tableEditModule', {
         } else {
           newRecords.forEach(item => {
             const rowid = getRowid($xeTable, item)
-            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
             fullDataRowIdData[rowid] = rest
             fullAllDataRowIdData[rowid] = rest
             afterFullData.unshift(item)
@@ -144,7 +144,7 @@ hooks.add('tableEditModule', {
           } else {
             newRecords.forEach(item => {
               const rowid = getRowid($xeTable, item)
-              const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, treeIndex: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
+              const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, treeIndex: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
               fullDataRowIdData[rowid] = rest
               fullAllDataRowIdData[rowid] = rest
               afterFullData.push(item)
@@ -184,7 +184,7 @@ hooks.add('tableEditModule', {
                   targetIndex = targetIndex + 1
                 }
                 parentMapChilds.splice(targetIndex, 0, item)
-                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0 }
+                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
                 fullDataRowIdData[rowid] = rest
                 fullAllDataRowIdData[rowid] = rest
               })
@@ -329,6 +329,133 @@ hooks.add('tableEditModule', {
       })
     }
 
+    const handleEditActive = (params: any, evnt: Event | null, isFocus: boolean) => {
+      const { editConfig, mouseConfig } = props
+      const { editStore, tableColumn } = reactData
+      const editOpts = computeEditOpts.value
+      const { mode } = editOpts
+      const { actived, focused } = editStore
+      const { row, column } = params
+      const { editRender } = column
+      const cell = (params.cell || $xeTable.getCellElement(row, column))
+      const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
+      params.cell = cell
+      if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
+        // 激活编辑
+        if (!$xeTable.isPendingByRow(row)) {
+          if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
+            // 判断是否禁用编辑
+            let type: 'edit-disabled' | 'edit-activated' = 'edit-disabled'
+            if (!beforeEditMethod || beforeEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })) {
+              if (mouseConfig) {
+                $xeTable.clearSelected()
+                if ($xeTable.clearCellAreas) {
+                  $xeTable.clearCellAreas()
+                  $xeTable.clearCopyCellArea()
+                }
+              }
+              $xeTable.closeTooltip()
+              if (actived.column) {
+                handleClearEdit(evnt)
+              }
+              type = 'edit-activated'
+              column.renderHeight = cell.offsetHeight
+              actived.args = params
+              actived.row = row
+              actived.column = column
+              if (mode === 'row') {
+                tableColumn.forEach((column: any) => getEditColumnModel(row, column))
+              } else {
+                getEditColumnModel(row, column)
+              }
+              const afterEditMethod = editOpts.afterEditMethod
+              nextTick(() => {
+                if (isFocus) {
+                  $xeTable.handleFocus(params, evnt)
+                }
+                if (afterEditMethod) {
+                  afterEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })
+                }
+              })
+            }
+            $xeTable.dispatchEvent(type, {
+              row,
+              rowIndex: $xeTable.getRowIndex(row),
+              $rowIndex: $xeTable.getVMRowIndex(row),
+              column,
+              columnIndex: $xeTable.getColumnIndex(column),
+              $columnIndex: $xeTable.getVMColumnIndex(column)
+            }, evnt)
+
+            // v4已废弃
+            if (type === 'edit-activated') {
+              $xeTable.dispatchEvent('edit-actived', {
+                row,
+                rowIndex: $xeTable.getRowIndex(row),
+                $rowIndex: $xeTable.getVMRowIndex(row),
+                column,
+                columnIndex: $xeTable.getColumnIndex(column),
+                $columnIndex: $xeTable.getVMColumnIndex(column)
+              }, evnt)
+            }
+          } else {
+            const { column: oldColumn } = actived
+            if (mouseConfig) {
+              $xeTable.clearSelected()
+              if ($xeTable.clearCellAreas) {
+                $xeTable.clearCellAreas()
+                $xeTable.clearCopyCellArea()
+              }
+            }
+            if (oldColumn !== column) {
+              const { model: oldModel } = oldColumn
+              if (oldModel.update) {
+                setCellValue(row, oldColumn, oldModel.value)
+              }
+              if ($xeTable.clearValidate) {
+                $xeTable.clearValidate(row, column)
+              }
+            }
+            column.renderHeight = cell.offsetHeight
+            actived.args = params
+            actived.column = column
+            if (isFocus) {
+              setTimeout(() => {
+                $xeTable.handleFocus(params, evnt)
+              })
+            }
+          }
+          focused.column = null
+          focused.row = null
+          $xeTable.focus()
+        }
+      }
+      return nextTick()
+    }
+
+    const handleEditCell = (row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo, isPos: boolean) => {
+      const { editConfig } = props
+      const column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn
+      if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
+        return Promise.resolve(isPos ? $xeTable.scrollToRow(row, column) : null).then(() => {
+          const cell = $xeTable.getCellElement(row, column)
+          if (cell) {
+            handleEditActive({
+              row,
+              rowIndex: $xeTable.getRowIndex(row),
+              column,
+              columnIndex: $xeTable.getColumnIndex(column),
+              cell,
+              $table: $xeTable
+            }, null, false)
+            internalData._lastCallTime = Date.now()
+          }
+          return nextTick()
+        })
+      }
+      return nextTick()
+    }
+
     editMethods = {
       /**
        * 往表格中插入临时数据
@@ -658,7 +785,7 @@ hooks.add('tableEditModule', {
         if (fieldOrColumn) {
           column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn
         }
-        return $xeTable.setEditCell(row, column)
+        return handleEditCell(row, column, false)
       },
       setActiveCell (row, fieldOrColumn) {
         if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -671,26 +798,7 @@ hooks.add('tableEditModule', {
        * 激活单元格编辑
        */
       setEditCell (row, fieldOrColumn) {
-        const { editConfig } = props
-        const column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn
-        if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
-          return $xeTable.scrollToRow(row, column).then(() => {
-            const cell = $xeTable.getCellElement(row, column)
-            if (cell) {
-              editPrivateMethods.handleEdit({
-                row,
-                rowIndex: $xeTable.getRowIndex(row),
-                column,
-                columnIndex: $xeTable.getColumnIndex(column),
-                cell,
-                $table: $xeTable
-              })
-              internalData._lastCallTime = Date.now()
-            }
-            return nextTick()
-          })
-        }
-        return nextTick()
+        return handleEditCell(row, fieldOrColumn, true)
       },
       /**
        * 只对 trigger=dblclick 有效，选中单元格
@@ -722,103 +830,7 @@ hooks.add('tableEditModule', {
        * 处理激活编辑
        */
       handleEdit (params, evnt) {
-        const { editConfig, mouseConfig } = props
-        const { editStore, tableColumn } = reactData
-        const editOpts = computeEditOpts.value
-        const { mode } = editOpts
-        const { actived, focused } = editStore
-        const { row, column } = params
-        const { editRender } = column
-        const cell = (params.cell || $xeTable.getCellElement(row, column))
-        const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
-        params.cell = cell
-        if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
-          // 激活编辑
-          if (!$xeTable.isPendingByRow(row)) {
-            if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
-              // 判断是否禁用编辑
-              let type: 'edit-disabled' | 'edit-activated' = 'edit-disabled'
-              if (!beforeEditMethod || beforeEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })) {
-                if (mouseConfig) {
-                  editMethods.clearSelected()
-                  if ($xeTable.clearCellAreas) {
-                    $xeTable.clearCellAreas()
-                    $xeTable.clearCopyCellArea()
-                  }
-                }
-                $xeTable.closeTooltip()
-                if (actived.column) {
-                  handleClearEdit(evnt)
-                }
-                type = 'edit-activated'
-                column.renderHeight = cell.offsetHeight
-                actived.args = params
-                actived.row = row
-                actived.column = column
-                if (mode === 'row') {
-                  tableColumn.forEach((column: any) => getEditColumnModel(row, column))
-                } else {
-                  getEditColumnModel(row, column)
-                }
-                const afterEditMethod = editOpts.afterEditMethod
-                nextTick(() => {
-                  editPrivateMethods.handleFocus(params, evnt)
-                  if (afterEditMethod) {
-                    afterEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })
-                  }
-                })
-              }
-              $xeTable.dispatchEvent(type, {
-                row,
-                rowIndex: $xeTable.getRowIndex(row),
-                $rowIndex: $xeTable.getVMRowIndex(row),
-                column,
-                columnIndex: $xeTable.getColumnIndex(column),
-                $columnIndex: $xeTable.getVMColumnIndex(column)
-              }, evnt)
-
-              // v4已废弃
-              if (type === 'edit-activated') {
-                $xeTable.dispatchEvent('edit-actived', {
-                  row,
-                  rowIndex: $xeTable.getRowIndex(row),
-                  $rowIndex: $xeTable.getVMRowIndex(row),
-                  column,
-                  columnIndex: $xeTable.getColumnIndex(column),
-                  $columnIndex: $xeTable.getVMColumnIndex(column)
-                }, evnt)
-              }
-            } else {
-              const { column: oldColumn } = actived
-              if (mouseConfig) {
-                editMethods.clearSelected()
-                if ($xeTable.clearCellAreas) {
-                  $xeTable.clearCellAreas()
-                  $xeTable.clearCopyCellArea()
-                }
-              }
-              if (oldColumn !== column) {
-                const { model: oldModel } = oldColumn
-                if (oldModel.update) {
-                  setCellValue(row, oldColumn, oldModel.value)
-                }
-                if ($xeTable.clearValidate) {
-                  $xeTable.clearValidate(row, column)
-                }
-              }
-              column.renderHeight = cell.offsetHeight
-              actived.args = params
-              actived.column = column
-              setTimeout(() => {
-                editPrivateMethods.handleFocus(params, evnt)
-              })
-            }
-            focused.column = null
-            focused.row = null
-            $xeTable.focus()
-          }
-        }
-        return nextTick()
+        return handleEditActive(params, evnt, true)
       },
       /**
        * @deprecated

package/packages/table/src/body.ts

@@ -27,7 +27,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeLeftFixedWidth, computeRightFixedWidth, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyScroll = ref() as Ref<HTMLDivElement>
@@ -429,7 +429,7 @@ export default defineComponent({
 
     const renderRows = (fixedType: 'left' | 'right' | '', isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) => {
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
+      const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove, rowExpandHeightFlag } = tableReactData
       const { fullAllDataRowIdData } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
@@ -462,18 +462,18 @@ export default defineComponent({
           }
         }
         const rowid = getRowid($xeTable, row)
-        const rest = fullAllDataRowIdData[rowid]
+        const rowRest = fullAllDataRowIdData[rowid]
         let rowLevel = 0
         let seq: string | number = -1
         let _rowIndex = 0
-        if (rest) {
-          rowLevel = rest.level
+        if (rowRest) {
+          rowLevel = rowRest.level
           if (treeConfig && transform && seqMode === 'increasing') {
-            seq = rest._index + 1
+            seq = rowRest._index + 1
           } else {
-            seq = rest.seq
+            seq = rowRest.seq
           }
-          _rowIndex = rest._index
+          _rowIndex = rowRest._index
         }
         const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
         // 行是否被展开
@@ -537,46 +537,60 @@ export default defineComponent({
         // 如果行被展开了
         if (isExpandRow) {
           const expandOpts = computeExpandOpts.value
-          const { height: expandHeight, padding } = expandOpts
-          const cellStyle: any = {}
-          if (expandHeight) {
-            cellStyle.height = `${expandHeight}px`
-          }
-          if (treeConfig) {
-            cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
-          }
-          const { showOverflow } = expandColumn
-          const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? isAllOverflow : showOverflow
-          const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
-          rows.push(
-            h('tr', {
-              class: ['vxe-body--expanded-row', {
-                'is--padding': padding
-              }],
-              key: `expand_${rowid}`,
-              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle) : null,
-              ...trOn
-            }, [
-              h('td', {
-                class: {
-                  'vxe-body--expanded-column': 1,
-                  'fixed--hidden': fixedType && !hasFixedColumn,
-                  'col--ellipsis': hasEllipsis
-                },
-                colspan: tableColumn.length
+          const { height: expandHeight, padding, mode: expandMode } = expandOpts
+          if (expandMode === 'fixed') {
+            rows.push(
+              h('tr', {
+                class: 'vxe-body--row-expanded-place',
+                key: `expand_${rowid}`,
+                rowid
               }, [
-                h('div', {
-                  class: {
-                    'vxe-body--expanded-cell': 1,
-                    'is--ellipsis': expandHeight
-                  },
-                  style: cellStyle
+                h('td', {
+                  class: 'vxe-body--row-expanded-place-column',
+                  colspan: tableColumn.length,
+                  style: {
+                    height: `${rowExpandHeightFlag ? (rowRest.expandHeight || expandHeight) : 0}px`
+                  }
+                })
+              ])
+            )
+          } else {
+            const cellStyle: any = {}
+            if (expandHeight) {
+              cellStyle.height = `${expandHeight}px`
+            }
+            if (treeConfig) {
+              cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
+            }
+            const { showOverflow } = expandColumn
+            const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? isAllOverflow : showOverflow
+            const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
+            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
                 }, [
-                  expandColumn.renderData(expandParams)
+                  h('div', {
+                    class: ['vxe-body--expanded-cell', {
+                      'is--ellipsis': expandHeight
+                    }],
+                    style: cellStyle
+                  }, [
+                    expandColumn.renderData(expandParams)
+                  ])
                 ])
               ])
-            ])
-          )
+            )
+          }
         }
         // 如果是树形表格
         if (isExpandTree) {
@@ -627,15 +641,14 @@ export default defineComponent({
       const emptyOpts = computeEmptyOpts.value
       const mouseOpts = computeMouseOpts.value
       const rowDragOpts = computeRowDragOpts.value
-      const leftFixedWidth = computeLeftFixedWidth.value
-      const rightFixedWidth = computeRightFixedWidth.value
+      const expandOpts = computeExpandOpts.value
 
       let renderDataList = tableData
       let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
       let isOptimizeMode = false
       // 如果是使用优化模式
       if (scrollXLoad || scrollYLoad || isAllOverflow) {
-        if (expandColumn || spanMethod || footerSpanMethod) {
+        if ((expandColumn && expandOpts.mode !== 'fixed') || spanMethod || footerSpanMethod) {
           // 如果不支持优化模式
         } else {
           isOptimizeMode = true
@@ -716,9 +729,6 @@ export default defineComponent({
           $xeTable.triggerBodyScrollEvent(evnt, fixedType)
         }
       }
-      if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
-        ons.onWheel = $xeTable.triggerBodyWheelEvent
-      }
 
       return h('div', {
         ref: refElem,