vxe-table 4.12.0-beta.9 → 4.12.1

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

@@ -106,8 +106,8 @@ hooks.add('tableEditModule', {
 
     const handleInsertRowAt = (records: any, targetRow: any, isInsertNextRow?: boolean) => {
       const { treeConfig } = props
-      const { mergeList, editStore } = reactData
-      const { tableFullTreeData, afterFullData, tableFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
+      const { mergeList } = reactData
+      const { tableFullTreeData, afterFullData, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData
       const treeOpts = computeTreeOpts.value
       const { transform, rowField, mapChildrenField } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
@@ -246,11 +246,11 @@ hooks.add('tableEditModule', {
           }
         }
       }
-      const { insertMaps } = editStore
       newRecords.forEach(newRow => {
         const rowid = getRowid($xeTable, newRow)
-        insertMaps[rowid] = newRow
+        insertRowMaps[rowid] = newRow
       })
+      reactData.insertRowFlag++
       $xeTable.cacheRowMap(false)
       $xeTable.updateScrollYStatus()
       $xeTable.handleTableData(treeConfig && transform)
@@ -324,6 +324,8 @@ hooks.add('tableEditModule', {
     }
 
     const handleEditActive = (params: any, evnt: Event | null, isFocus: boolean, isPos: boolean) => {
+      const $xeGrid = $xeTable.xeGrid
+
       const { editConfig, mouseConfig } = props
       const { editStore, tableColumn } = reactData
       const editOpts = computeEditOpts.value
@@ -340,7 +342,7 @@ hooks.add('tableEditModule', {
           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 (!beforeEditMethod || beforeEditMethod({ ...params, $table: $xeTable, $grid: $xeGrid })) {
               if (mouseConfig) {
                 $xeTable.clearSelected()
                 if ($xeTable.clearCellAreas) {
@@ -368,7 +370,7 @@ hooks.add('tableEditModule', {
                   $xeTable.handleFocus(params, evnt)
                 }
                 if (afterEditMethod) {
-                  afterEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })
+                  afterEditMethod({ ...params, $table: $xeTable, $grid: $xeGrid })
                 }
               })
             }
@@ -490,15 +492,13 @@ hooks.add('tableEditModule', {
        */
       remove (rows: any) {
         const { treeConfig } = props
-        const { mergeList, editStore, selectCheckboxMaps } = reactData
-        const { tableFullTreeData, afterFullData, tableFullData } = internalData
+        const { mergeList, editStore } = reactData
+        const { tableFullTreeData, selectCheckboxMaps, afterFullData, tableFullData, pendingRowMaps, insertRowMaps, removeRowMaps } = internalData
         const checkboxOpts = computeCheckboxOpts.value
         const treeOpts = computeTreeOpts.value
         const { transform, mapChildrenField } = treeOpts
         const childrenField = treeOpts.children || treeOpts.childrenField
-        const { actived, removeMaps } = editStore
-        const insertDataRowMaps = Object.assign({}, editStore.insertMaps)
-        const pendingDataRowMaps = Object.assign({}, reactData.pendingRowMaps)
+        const { actived } = editStore
         const { checkField } = checkboxOpts
         let delList: any[] = []
         if (!rows) {
@@ -510,19 +510,18 @@ hooks.add('tableEditModule', {
         rows.forEach((row: any) => {
           if (!$xeTable.isInsertByRow(row)) {
             const rowid = getRowid($xeTable, row)
-            removeMaps[rowid] = row
+            removeRowMaps[rowid] = row
           }
         })
         // 如果绑定了多选属性，则更新状态
         if (!checkField) {
-          const selectRowMaps = { ...selectCheckboxMaps }
           rows.forEach((row: any) => {
             const rowid = getRowid($xeTable, row)
-            if (selectRowMaps[rowid]) {
-              delete selectRowMaps[rowid]
+            if (selectCheckboxMaps[rowid]) {
+              delete selectCheckboxMaps[rowid]
             }
           })
-          reactData.selectCheckboxMaps = selectRowMaps
+          reactData.updateCheckboxFlag++
         }
         // 从数据源中移除
         if (tableFullData === rows) {
@@ -579,15 +578,16 @@ hooks.add('tableEditModule', {
         // 从新增中移除已删除的数据
         rows.forEach((row: any) => {
           const rowid = getRowid($xeTable, row)
-          if (insertDataRowMaps[rowid]) {
-            delete insertDataRowMaps[rowid]
+          if (insertRowMaps[rowid]) {
+            delete insertRowMaps[rowid]
           }
-          if (pendingDataRowMaps[rowid]) {
-            delete pendingDataRowMaps[rowid]
+          if (pendingRowMaps[rowid]) {
+            delete pendingRowMaps[rowid]
           }
         })
-        editStore.insertMaps = insertDataRowMaps
-        reactData.pendingRowMaps = pendingDataRowMaps
+        reactData.removeRowFlag++
+        reactData.insertRowFlag++
+        reactData.pendingRowFlag++
         $xeTable.updateFooter()
         $xeTable.cacheRowMap(false)
         $xeTable.handleTableData(treeConfig && transform)
@@ -656,11 +656,9 @@ hooks.add('tableEditModule', {
        * 获取新增的临时数据
        */
       getInsertRecords () {
-        const { editStore } = reactData
-        const { fullAllDataRowIdData } = internalData
-        const { insertMaps } = editStore
+        const { fullAllDataRowIdData, insertRowMaps } = internalData
         const insertRecords: any[] = []
-        XEUtils.each(insertMaps, (row, rowid) => {
+        XEUtils.each(insertRowMaps, (row, rowid) => {
           if (fullAllDataRowIdData[rowid]) {
             insertRecords.push(row)
           }
@@ -671,10 +669,9 @@ hooks.add('tableEditModule', {
        * 获取已删除的数据
        */
       getRemoveRecords () {
-        const { editStore } = reactData
-        const { removeMaps } = editStore
+        const { removeRowMaps } = internalData
         const removeRecords: any[] = []
-        XEUtils.each(removeMaps, (row) => {
+        XEUtils.each(removeRowMaps, (row) => {
           removeRecords.push(row)
         })
         return removeRecords
@@ -701,7 +698,7 @@ hooks.add('tableEditModule', {
         if (process.env.VUE_APP_VXE_ENV === 'development') {
           warnLog('vxe.error.delFunc', ['getActiveRecord', 'getEditRecord'])
         }
-        return this.getEditRecord()
+        return $xeTable.getEditRecord()
       },
       getEditRecord () {
         const { editStore } = reactData
@@ -729,7 +726,7 @@ hooks.add('tableEditModule', {
         if (process.env.VUE_APP_VXE_ENV === 'development') {
           warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit'])
         }
-        return this.clearEdit(row)
+        return $xeTable.clearEdit(row)
       },
       /**
        * 清除激活的编辑
@@ -753,7 +750,7 @@ hooks.add('tableEditModule', {
           warnLog('vxe.error.delFunc', ['isActiveByRow', 'isEditByRow'])
         }
         // 即将废弃
-        return this.isEditByRow(row)
+        return $xeTable.isEditByRow(row)
       },
       /**
        * 判断行是否为激活编辑状态
@@ -914,7 +911,7 @@ hooks.add('tableEditModule', {
           if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
             if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
               handleClearEdit(evnt)
-              editMethods.clearSelected()
+              $xeTable.clearSelected()
               if ($xeTable.clearCellAreas) {
                 $xeTable.clearCellAreas()
                 $xeTable.clearCopyCellArea()

package/packages/table/module/export/export-panel.ts

@@ -162,6 +162,8 @@ export default defineComponent({
     }
 
     const renderVN = () => {
+      const $xeGrid = $xeTable.xeGrid
+
       const { defaultOptions, storeData } = props
       const { isAll: isAllChecked, isIndeterminate: isAllIndeterminate } = reactData
       const { hasTree, hasMerge, isPrint, hasColgroup, columns } = storeData
@@ -242,7 +244,7 @@ export default defineComponent({
           default: () => {
             const params = {
               $table: $xeTable,
-              $grid: $xeTable.xegrid,
+              $grid: $xeGrid,
               options: defaultOptions,
               columns,
               params: defaultOptions.params as any
@@ -487,7 +489,7 @@ export default defineComponent({
           footer () {
             const params = {
               $table: $xeTable,
-              $grid: $xeTable.xegrid,
+              $grid: $xeGrid,
               options: defaultOptions,
               columns,
               params: defaultOptions.params as any

package/packages/table/module/export/import-panel.ts

@@ -93,6 +93,8 @@ export default defineComponent({
     }
 
     const renderVN = () => {
+      const $xeGrid = $xeTable.xeGrid
+
       const { defaultOptions, storeData } = props
       const selectName = computeSelectName.value
       const hasFile = computeHasFile.value
@@ -127,7 +129,7 @@ export default defineComponent({
           default: () => {
             const params = {
               $table: $xeTable,
-              $grid: $xeTable.xegrid,
+              $grid: $xeGrid,
               options: defaultOptions,
               params: defaultOptions.params as any
             }
@@ -204,7 +206,7 @@ export default defineComponent({
           footer () {
             const params = {
               $table: $xeTable,
-              $grid: $xeTable.xegrid,
+              $grid: $xeGrid,
               options: defaultOptions,
               params: defaultOptions.params as any
             }

package/packages/table/module/filter/panel.ts

@@ -97,13 +97,23 @@ export default defineComponent({
       if (filterSlot) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template'
+            class: 'vxe-table--filter-template',
+            style: maxHeight
+              ? {
+                  maxHeight: `${maxHeight}px`
+                }
+              : {}
           }, $xeTable.callSlot(filterSlot, params))
         ]
       } else if (rtFilter) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template'
+            class: 'vxe-table--filter-template',
+            style: maxHeight
+              ? {
+                  maxHeight: `${maxHeight}px`
+                }
+              : {}
           }, getSlotVNs(rtFilter(filterRender, params)))
         ]
       }

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

@@ -3,7 +3,7 @@ import { VxeUI } from '../../../ui'
 import { getRefElem } from '../../src/util'
 import { browse, hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom'
 
-import type { TableKeyboardPrivateMethods } from '../../../../types'
+import type { TableKeyboardPrivateMethods, VxeTableDefines } from '../../../../types'
 
 const { hooks } = VxeUI
 
@@ -33,7 +33,7 @@ hooks.add('tableKeyboardModule', {
   setupTable ($xeTable) {
     const { props, reactData, internalData } = $xeTable
     const { refElem } = $xeTable.getRefMaps()
-    const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeColumnOpts, computeCellOpts, computeDefaultRowHeight, computeCurrentRowOpts, computeCurrentColumnOpts } = $xeTable.getComputeMaps()
 
     function getCheckboxRangeRows (evnt: MouseEvent, params: any, targetTrElem: HTMLElement, trRect: DOMRect, offsetClientTop: number, moveRange: number) {
       const { showOverflow } = props
@@ -276,13 +276,47 @@ hooks.add('tableKeyboardModule', {
       }
     }
 
+    const handleMoveSelected = (evnt: any, args: any, isLeftArrow: boolean, isUpArrow: boolean, isRightArrow: boolean, isDwArrow: boolean) => {
+      const { afterFullData, visibleColumn } = internalData
+      const params = Object.assign({}, args)
+      const _rowIndex = $xeTable.getVTRowIndex(params.row)
+      const _columnIndex = $xeTable.getVTColumnIndex(params.column)
+      evnt.preventDefault()
+      if (isUpArrow && _rowIndex > 0) {
+        // 移动到上一行
+        params.rowIndex = _rowIndex - 1
+        params.row = afterFullData[params.rowIndex]
+      } else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
+        // 移动到下一行
+        params.rowIndex = _rowIndex + 1
+        params.row = afterFullData[params.rowIndex]
+      } else if (isLeftArrow && _columnIndex) {
+        // 移动到左侧单元格
+        params.columnIndex = _columnIndex - 1
+        params.column = visibleColumn[params.columnIndex]
+      } else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+        // 移动到右侧单元格
+        params.columnIndex = _columnIndex + 1
+        params.column = visibleColumn[params.columnIndex]
+      }
+      $xeTable.scrollToRow(params.row, params.column).then(() => {
+        params.cell = $xeTable.getCellElement(params.row, params.column)
+        $xeTable.handleSelected(params, evnt)
+      })
+      return params
+    }
+
     const keyboardMethods: TableKeyboardPrivateMethods = {
       // 处理 Tab 键移动
       moveTabSelected (args, isLeft, evnt) {
         const { editConfig } = props
         const { afterFullData, visibleColumn } = internalData
         const editOpts = computeEditOpts.value
-        let targetRow
+        const rowOpts = computeRowOpts.value
+        const currentRowOpts = computeCurrentRowOpts.value
+        const columnOpts = computeColumnOpts.value
+        const currentColumnOpts = computeCurrentColumnOpts.value
+        let targetRow: any
         let targetRowIndex: any
         let targetColumnIndex: any
         const params = Object.assign({}, args)
@@ -324,18 +358,28 @@ hooks.add('tableKeyboardModule', {
           params.columnIndex = targetColumnIndex
           params.column = targetColumn
           params.cell = $xeTable.getCellElement(params.row, params.column)
+          if (rowOpts.isCurrent && currentRowOpts.isFollowSelected) {
+            $xeTable.triggerCurrentRowEvent(evnt, params)
+          }
+          if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+            $xeTable.triggerCurrentColumnEvent(evnt, params)
+          }
           if (editConfig) {
             if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
               if (editOpts.mode === 'row') {
                 $xeTable.handleEdit(params, evnt)
               } else {
                 $xeTable.scrollToRow(params.row, params.column)
-                  .then(() => $xeTable.handleSelected(params, evnt))
+                  .then(() => {
+                    $xeTable.handleSelected(params, evnt)
+                  })
               }
             }
           } else {
             $xeTable.scrollToRow(params.row, params.column)
-              .then(() => $xeTable.handleSelected(params, evnt))
+              .then(() => {
+                $xeTable.handleSelected(params, evnt)
+              })
           }
         }
       },
@@ -347,7 +391,6 @@ hooks.add('tableKeyboardModule', {
         const treeOpts = computeTreeOpts.value
         const childrenField = treeOpts.children || treeOpts.childrenField
         let targetRow
-        evnt.preventDefault()
         if (currentRow) {
           if (treeConfig) {
             const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField })
@@ -368,6 +411,7 @@ hooks.add('tableKeyboardModule', {
           targetRow = afterFullData[0]
         }
         if (targetRow) {
+          evnt.preventDefault()
           const params = {
             $table: $xeTable,
             row: targetRow,
@@ -378,34 +422,64 @@ hooks.add('tableKeyboardModule', {
             .then(() => $xeTable.triggerCurrentRowEvent(evnt, params))
         }
       },
+      // 处理当前列方向键移动
+      moveCurrentColumn (isLeftArrow, isRightArrow, evnt) {
+        const { currentColumn } = reactData
+        const { visibleColumn } = internalData
+        let targetCol: VxeTableDefines.ColumnInfo | null = null
+        if (currentColumn) {
+          const _columnIndex = $xeTable.getVTColumnIndex(currentColumn)
+          if (isLeftArrow && _columnIndex > 0) {
+            targetCol = visibleColumn[_columnIndex - 1]
+          } else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+            targetCol = visibleColumn[_columnIndex + 1]
+          }
+        } else {
+          targetCol = visibleColumn[0]
+        }
+        if (targetCol) {
+          evnt.preventDefault()
+          const params = {
+            $table: $xeTable,
+            column: targetCol,
+            columnIndex: $xeTable.getColumnIndex(targetCol),
+            $columnIndex: $xeTable.getVMColumnIndex(targetCol)
+          }
+          $xeTable.scrollToColumn(targetCol)
+            .then(() => $xeTable.triggerCurrentColumnEvent(evnt, params))
+        }
+      },
       // 处理可编辑方向键移动
-      moveSelected (args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
-        const { afterFullData, visibleColumn } = internalData
-        const params = Object.assign({}, args)
-        const _rowIndex = $xeTable.getVTRowIndex(params.row)
-        const _columnIndex = $xeTable.getVTColumnIndex(params.column)
-        evnt.preventDefault()
-        if (isUpArrow && _rowIndex > 0) {
-          // 移动到上一行
-          params.rowIndex = _rowIndex - 1
-          params.row = afterFullData[params.rowIndex]
-        } else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
-          // 移动到下一行
-          params.rowIndex = _rowIndex + 1
-          params.row = afterFullData[params.rowIndex]
-        } else if (isLeftArrow && _columnIndex) {
-          // 移动到左侧单元格
-          params.columnIndex = _columnIndex - 1
-          params.column = visibleColumn[params.columnIndex]
-        } else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
-          // 移动到右侧单元格
-          params.columnIndex = _columnIndex + 1
-          params.column = visibleColumn[params.columnIndex]
+      moveArrowSelected (args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+        const { highlightCurrentRow, highlightCurrentColumn } = props
+        const rowOpts = computeRowOpts.value
+        const columnOpts = computeColumnOpts.value
+        handleMoveSelected(evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow)
+        // 当前行按键上下移动
+        if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
+          $xeTable.moveCurrentRow(isUpArrow, isDwArrow, evnt)
         }
-        $xeTable.scrollToRow(params.row, params.column).then(() => {
-          params.cell = $xeTable.getCellElement(params.row, params.column)
-          $xeTable.handleSelected(params, evnt)
-        })
+        // 当前行按键左右移动
+        if ((isLeftArrow || isRightArrow) && (columnOpts.isCurrent || highlightCurrentColumn)) {
+          $xeTable.moveCurrentColumn(isLeftArrow, isRightArrow, evnt)
+        }
+      },
+      moveEnterSelected (args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+        const rowOpts = computeRowOpts.value
+        const currentRowOpts = computeCurrentRowOpts.value
+        const columnOpts = computeColumnOpts.value
+        const currentColumnOpts = computeCurrentColumnOpts.value
+        const params = handleMoveSelected(evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow)
+        if ((rowOpts.isCurrent && currentRowOpts.isFollowSelected)) {
+          $xeTable.triggerCurrentRowEvent(evnt, params)
+        }
+        if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+          $xeTable.triggerCurrentColumnEvent(evnt, params)
+        }
+      },
+      // 已废弃，待删除
+      moveSelected (args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+        handleMoveSelected(evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow)
       },
       handleCellMousedownEvent
     }

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

@@ -279,10 +279,12 @@ hooks.add('tableMenuModule', {
        * 快捷菜单点击事件
        */
       ctxMenuLinkEvent (evnt, menu) {
+        const $xeGrid = $xeTable.xeGrid
+
         // 如果一级菜单有配置 code 则允许点击，否则不能点击
         if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
           const gMenuOpts = menus.get(menu.code)
-          const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeTable.xegrid, $event: evnt })
+          const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeGrid, $event: evnt })
           const tmMethod = gMenuOpts ? (gMenuOpts.tableMenuMethod || gMenuOpts.menuMethod) : null
           if (tmMethod) {
             tmMethod(params, evnt)

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

@@ -109,9 +109,7 @@ hooks.add('tableValidatorModule', {
     const beginValidate = (rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull?: boolean): Promise<any> => {
       const validRest: any = {}
       const { editRules, treeConfig } = props
-      const { editStore, pendingRowMaps } = reactData
-      const { afterFullData } = internalData
-      const { removeMaps } = editStore
+      const { afterFullData, pendingRowMaps, removeRowMaps } = internalData
       const treeOpts = computeTreeOpts.value
       const childrenField = treeOpts.children || treeOpts.childrenField
       const validOpts = computeValidOpts.value
@@ -147,7 +145,7 @@ hooks.add('tableValidatorModule', {
         const handleVaild = (row: any) => {
           const rowid = getRowid($xeTable, row)
           // 是否删除
-          if (removeMaps[rowid]) {
+          if (removeRowMaps[rowid]) {
             return
           }
           // 是否标记删除
@@ -382,6 +380,8 @@ hooks.add('tableValidatorModule', {
        *  trigger=blur|change 触发方式（除非特殊场景，否则默认为空就行）
        */
       validCellRules (validType, row, column, val) {
+        const $xeGrid = $xeTable.xeGrid
+
         const { editRules } = props
         const { field } = column
         const errorRules: Rule[] = []
@@ -404,7 +404,7 @@ hooks.add('tableValidatorModule', {
                     columnIndex: $xeTable.getColumnIndex(column),
                     field: column.field,
                     $table: $xeTable,
-                    $grid: $xeTable.xegrid
+                    $grid: $xeGrid
                   }
                   let customValid: any
                   if (XEUtils.isString(validator)) {

package/packages/table/render/index.ts

@@ -6,10 +6,9 @@ import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils'
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
-import type { VxeButtonComponent } from 'vxe-pc-ui'
 import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
-const { getConfig, renderer, getI18n } = VxeUI
+const { getConfig, renderer, getI18n, getComponent } = VxeUI
 
 const componentDefaultModelProp = 'modelValue'
 
@@ -41,7 +40,7 @@ function getOldComponentName (name: string) {
 }
 
 function getDefaultComponent ({ name }: any) {
-  return resolveComponent(name) as ComponentOptions
+  return getComponent(name)
 }
 
 /**
@@ -393,7 +392,7 @@ function oldEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOpti
  */
 function oldButtonEditRender (renderOpts: any, params: any) {
   return [
-    h(resolveComponent('vxe-button') as VxeButtonComponent, {
+    h(getComponent('vxe-button'), {
       ...getCellEditProps(renderOpts, params, null),
       ...getComponentOns(renderOpts, params)
     })