vxe-table 3.14.0-beta.8 → 3.14.0

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

@@ -61,13 +61,23 @@ export default {
       if (filterSlot) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template'
+            class: 'vxe-table--filter-template',
+            style: maxHeight
+              ? {
+                  maxHeight: `${maxHeight}px`
+                }
+              : {}
           }, $xeTable.callSlot(filterSlot, params, h))
         ]
       } else if (rtFilter) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template'
+            class: 'vxe-table--filter-template',
+            style: maxHeight
+              ? {
+                  maxHeight: `${maxHeight}px`
+                }
+              : {}
           }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
         ]
       }
@@ -188,19 +198,22 @@ export default {
      *************************/
     // （单选）筛选发生改变
     changeRadioOption (evnt: any, checked: any, item: any) {
-      const { $parent: $xetable, filterStore } = this
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+
+      const { filterStore } = this
       filterStore.options.forEach((option: any) => {
         option._checked = false
       })
       item._checked = checked
-      $xetable.checkFilterOptions()
+      $xeTable.checkFilterOptions()
       this.confirmFilter(evnt)
     },
     // （多选）筛选发生改变
     changeMultipleOption (evnt: any, checked: any, item: any) {
-      const { $parent: $xetable } = this
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+
       item._checked = checked
-      $xetable.checkFilterOptions()
+      $xeTable.checkFilterOptions()
     },
     changeAllOption (evnt: any, checked: any) {
       if (this.filterStore.multiple) {
@@ -219,13 +232,15 @@ export default {
     },
     // 确认筛选
     confirmFilter (evnt: any) {
-      const { $parent: $xetable } = this
-      $xetable.handleFilterConfirmFilter(evnt)
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+
+      $xeTable.handleFilterConfirmFilter(evnt)
     },
     // 重置筛选
     resetFilter (evnt: any) {
-      const { $parent: $xetable } = this
-      $xetable.handleFilterResetFilter(evnt)
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+
+      $xeTable.handleFilterResetFilter(evnt)
     }
     /*************************
      * Publish methods

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

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils'
 import { getRefElem } from '../../src/util'
 import { browse, hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, TableReactData, TableInternalData } from '../../../../types'
 
 function getTargetOffset (target: any, container: any) {
   let offsetTop = 0
@@ -26,10 +26,10 @@ function getTargetOffset (target: any, container: any) {
   return { offsetTop, offsetLeft }
 }
 
-function getCheckboxRangeRows ($xeTable: any, evnt: MouseEvent, params: any, targetTrElem: HTMLElement, trRect: DOMRect, offsetClientTop: number, moveRange: number) {
+function getCheckboxRangeRows ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: MouseEvent, params: any, targetTrElem: HTMLElement, trRect: DOMRect, offsetClientTop: number, moveRange: number) {
   const props = $xeTable
-  const reactData = $xeTable
-  const internalData = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
 
   const { showOverflow } = props
   const { fullAllDataRowIdData, isResizeCellHeight } = internalData
@@ -96,17 +96,59 @@ function getCheckboxRangeRows ($xeTable: any, evnt: MouseEvent, params: any, tar
   return rangeRows
 }
 
+function handleMoveSelected ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: any, args: any, isLeftArrow: boolean, isUpArrow: boolean, isRightArrow: boolean, isDwArrow: boolean) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  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
+}
+
 export default {
   methods: {
     // 处理 Tab 键移动
     moveTabSelected (args: any, isLeft: any, evnt: any) {
-      const { afterFullData, visibleColumn, editConfig, editOpts } = this
-      let targetRow
-      let targetRowIndex
-      let targetColumnIndex
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { editConfig } = props
+      const { afterFullData, visibleColumn } = internalData
+      const editOpts = $xeTable.computeEditOpts
+      const rowOpts = $xeTable.computeRowOpts
+      const currentRowOpts = $xeTable.computeCurrentRowOpts
+      const columnOpts = $xeTable.computeColumnOpts
+      const currentColumnOpts = $xeTable.computeCurrentColumnOpts
+      let targetRow: any
+      let targetRowIndex: any
+      let targetColumnIndex: any
       const params = Object.assign({}, args)
-      const _rowIndex = this.getVTRowIndex(params.row)
-      const _columnIndex = this.getVTColumnIndex(params.column)
+      const _rowIndex = $xeTable.getVTRowIndex(params.row)
+      const _columnIndex = $xeTable.getVTColumnIndex(params.column)
       evnt.preventDefault()
       if (isLeft) {
         // 向左
@@ -142,28 +184,45 @@ export default {
         }
         params.columnIndex = targetColumnIndex
         params.column = targetColumn
-        params.cell = this.getCellElement(params.row, params.column)
+        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') {
-              this.handleEdit(params, evnt)
+              $xeTable.handleEdit(params, evnt)
             } else {
-              this.scrollToRow(params.row, params.column)
-                .then(() => this.handleSelected(params, evnt))
+              $xeTable.scrollToRow(params.row, params.column)
+                .then(() => {
+                  $xeTable.handleSelected(params, evnt)
+                })
             }
           }
         } else {
-          this.scrollToRow(params.row, params.column)
-            .then(() => this.handleSelected(params, evnt))
+          $xeTable.scrollToRow(params.row, params.column)
+            .then(() => {
+              $xeTable.handleSelected(params, evnt)
+            })
         }
       }
     },
     // 处理当前行方向键移动
-    moveCurrentRow (isUpArrow: any, isDwArrow: any, evnt: any) {
-      const { currentRow, treeConfig, treeOpts, afterFullData } = this
+    moveCurrentRow (isUpArrow: boolean, isDwArrow: boolean, evnt: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { treeConfig } = props
+      const { currentRow } = reactData
+      const { afterFullData } = internalData
+      const treeOpts = $xeTable.computeTreeOpts
       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 })
@@ -173,7 +232,7 @@ export default {
             targetRow = items[index + 1]
           }
         } else {
-          const _rowIndex = this.getVTRowIndex(currentRow)
+          const _rowIndex = $xeTable.getVTRowIndex(currentRow)
           if (isUpArrow && _rowIndex > 0) {
             targetRow = afterFullData[_rowIndex - 1]
           } else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
@@ -184,39 +243,86 @@ export default {
         targetRow = afterFullData[0]
       }
       if (targetRow) {
-        const params = { $table: this, row: targetRow }
-        this.scrollToRow(targetRow)
-          .then(() => this.triggerCurrentRowEvent(evnt, params))
+        evnt.preventDefault()
+        const params = {
+          $table: $xeTable,
+          row: targetRow,
+          rowIndex: $xeTable.getRowIndex(targetRow),
+          $rowIndex: $xeTable.getVMRowIndex(targetRow)
+        }
+        $xeTable.scrollToRow(targetRow)
+          .then(() => $xeTable.triggerCurrentRowEvent(evnt, params))
+      }
+    },
+    // 处理当前列方向键移动
+    moveCurrentColumn (isLeftArrow: boolean, isRightArrow: boolean, evnt: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      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: any, isLeftArrow: any, isUpArrow: any, isRightArrow: any, isDwArrow: any, evnt: any) {
-      const { afterFullData, visibleColumn } = this
-      const params = Object.assign({}, args)
-      const _rowIndex = this.getVTRowIndex(params.row)
-      const _columnIndex = this.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: any, isLeftArrow: boolean, isUpArrow: boolean, isRightArrow: boolean, isDwArrow: boolean, evnt: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      const { highlightCurrentRow, highlightCurrentColumn } = props
+      const rowOpts = $xeTable.computeRowOpts
+      const columnOpts = $xeTable.computeColumnOpts
+      handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow)
+      // 当前行按键上下移动
+      if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
+        $xeTable.moveCurrentRow(isUpArrow, isDwArrow, evnt)
       }
-      this.scrollToRow(params.row, params.column).then(() => {
-        params.cell = this.getCellElement(params.row, params.column)
-        this.handleSelected(params, evnt)
-      })
+      // 当前行按键左右移动
+      if ((isLeftArrow || isRightArrow) && (columnOpts.isCurrent || highlightCurrentColumn)) {
+        $xeTable.moveCurrentColumn(isLeftArrow, isRightArrow, evnt)
+      }
+    },
+    moveEnterSelected (args: any, isLeftArrow: boolean, isUpArrow: boolean, isRightArrow: boolean, isDwArrow: boolean, evnt: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      const rowOpts = $xeTable.computeRowOpts
+      const currentRowOpts = $xeTable.computeCurrentRowOpts
+      const columnOpts = $xeTable.computeColumnOpts
+      const currentColumnOpts = $xeTable.computeCurrentColumnOpts
+      const params = handleMoveSelected($xeTable, 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: any, isLeftArrow: boolean, isUpArrow: boolean, isRightArrow: boolean, isDwArrow: boolean, evnt: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow)
     },
     handleCellMousedownEvent (evnt: any, params: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods

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

@@ -4,6 +4,8 @@ import { getDomNode, getAbsolutePos, getEventTargetNode } from '../../../ui/src/
 import { isEnableConf, hasChildrenList } from '../../../ui/src/utils'
 import { warnLog } from '../../../ui/src/log'
 
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeGridConstructor, GridPrivateMethods, TableInternalData } from '../../../../types'
+
 const { menus } = VxeUI
 
 export default {
@@ -55,8 +57,9 @@ export default {
      * 快捷菜单事件处理
      */
     handleGlobalContextmenuEvent (evnt: any) {
-      const $xeTable = this
-      const internalData = $xeTable
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+      const internalData = $xeTable as unknown as TableInternalData
 
       const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this
       const { selected } = editStore
@@ -69,7 +72,7 @@ export default {
         }
         if (internalData._keyCtx) {
           const type = 'body'
-          const params: any = { type, $grid: this.$xegrid, $table: this, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt }
+          const params: any = { type, $grid: $xeGrid, $table: this, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt }
           // 如果开启单元格区域
           if (mouseConfig && mouseOpts.area) {
             const activeArea = this.getActiveCellArea()
@@ -96,7 +99,7 @@ export default {
             // target=td|th，直接向上找 table 去匹配即可
             return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId
           })
-          const params: any = { type: layout, $grid: this.$xegrid, $table: this, columns: this.visibleColumn.slice(0), $event: evnt }
+          const params: any = { type: layout, $grid: $xeGrid, $table: this, columns: this.visibleColumn.slice(0), $event: evnt }
           if (columnTargetNode.flag) {
             const cell = columnTargetNode.targetElem
             const column = this.getColumnNode(cell).item
@@ -129,7 +132,7 @@ export default {
           }
         }
       }
-      if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
+      if (tableFilter && !getEventTargetNode(evnt, (tableFilter as any).$el).flag) {
         this.closeFilter()
       }
       this.closeMenu()
@@ -253,10 +256,13 @@ export default {
      * 快捷菜单点击事件
      */
     ctxMenuLinkEvent (evnt: any, menu: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+
       // 如果一级菜单有配置 code 则允许点击，否则不能点击
       if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
         const gMenuOpts = menus.get(menu.code)
-        const params = Object.assign({ menu, $grid: this.$xegrid, $table: this, $event: evnt }, this.ctxMenuStore.args)
+        const params = Object.assign({ menu, $grid: $xeGrid, $table: this, $event: evnt }, this.ctxMenuStore.args)
         if (gMenuOpts && gMenuOpts.menuMethod) {
           gMenuOpts.menuMethod(params, evnt)
         }

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

@@ -2,6 +2,8 @@ import { CreateElement } from 'vue'
 import { VxeUI } from '../../../ui'
 import { getFuncText } from '../../../ui/src/utils'
 
+import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
+
 const { getIcon } = VxeUI
 
 export default {
@@ -20,7 +22,8 @@ export default {
     }
   },
   render (this: any, h: CreateElement) {
-    const $xetable = this.$parent
+    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+
     const { _e, ctxMenuOpts, ctxMenuStore } = this
     return h('div', {
       class: ['vxe-table--context-menu-wrapper', ctxMenuOpts.className, {
@@ -50,13 +53,13 @@ export default {
                 class: 'vxe-context-menu--link',
                 on: {
                   click (evnt: any) {
-                    $xetable.ctxMenuLinkEvent(evnt, item)
+                    $xeTable.ctxMenuLinkEvent(evnt, item)
                   },
                   mouseover (evnt: any) {
-                    $xetable.ctxMenuMouseoverEvent(evnt, item)
+                    $xeTable.ctxMenuMouseoverEvent(evnt, item)
                   },
                   mouseout (evnt: any) {
-                    $xetable.ctxMenuMouseoutEvent(evnt, item)
+                    $xeTable.ctxMenuMouseoutEvent(evnt, item)
                   }
                 }
               }, [
@@ -101,13 +104,13 @@ export default {
                         class: 'vxe-context-menu--link',
                         on: {
                           click (evnt: any) {
-                            $xetable.ctxMenuLinkEvent(evnt, child)
+                            $xeTable.ctxMenuLinkEvent(evnt, child)
                           },
                           mouseover (evnt: any) {
-                            $xetable.ctxMenuMouseoverEvent(evnt, item, child)
+                            $xeTable.ctxMenuMouseoverEvent(evnt, item, child)
                           },
                           mouseout (evnt: any) {
-                            $xetable.ctxMenuMouseoutEvent(evnt, item, child)
+                            $xeTable.ctxMenuMouseoutEvent(evnt, item)
                           }
                         }
                       }, [

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

@@ -161,8 +161,8 @@ export default {
 
       const validRest: any = {}
       const { editRules, treeConfig } = props
-      const { editStore, pendingRowMaps } = reactData
-      const { afterFullData } = internalData
+      const { editStore } = reactData
+      const { afterFullData, pendingRowMaps } = internalData
       const { removeMaps } = editStore
       const treeOpts = $xeTable.computeTreeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField

package/packages/table/render/index.ts

@@ -8,7 +8,7 @@ import { errLog } from '../../ui/src/log'
 
 import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
-const { getConfig, renderer, getI18n } = VxeUI
+const { getConfig, renderer, getI18n, getComponent } = VxeUI
 
 const componentDefaultModelProp = 'value'
 
@@ -48,7 +48,7 @@ function getOldComponent ({ name }: any) {
 }
 
 function getDefaultComponent ({ name }: any) {
-  return name
+  return getComponent(name) || name
 }
 
 function handleConfirmFilter (params: any, checked: any, option: any) {