vxe-table 4.12.0-beta.8 → 4.12.0

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,8 +109,8 @@ 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 { editStore } = reactData
+      const { afterFullData, pendingRowMaps } = internalData
       const { removeMaps } = editStore
       const treeOpts = computeTreeOpts.value
       const childrenField = treeOpts.children || treeOpts.childrenField
@@ -382,6 +382,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 +406,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)
     })

package/packages/table/src/body.ts

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util'
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -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, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, 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>
@@ -45,7 +45,7 @@ export default defineComponent({
       return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
     }
 
-    const renderLine = (params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
+    const renderLine = (rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
       const { row, column } = params
       const { afterFullData } = tableInternalData
       const { treeConfig } = tableProps
@@ -55,7 +55,6 @@ export default defineComponent({
       if (slots && (slots as any).line) {
         return $xeTable.callSlot((slots as any).line, params)
       }
-      const rowid = getRowid($xeTable, row)
       const rest = fullAllDataRowIdData[rowid]
       let rLevel = 0
       let prevRow = null
@@ -102,9 +101,11 @@ export default defineComponent({
       columns: VxeTableDefines.ColumnInfo[],
       items: any[]
     ) => {
-      const { fullAllDataRowIdData } = tableInternalData
+      const $xeGrid = $xeTable.xeGrid
+
+      const { fullAllDataRowIdData, fullColumnIdData, visibleColumn } = tableInternalData
       const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
-      const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, calcCellHeightFlag, resizeHeightFlag, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
+      const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
       const { afterFullData, scrollXStore, scrollYStore } = tableInternalData
       const cellOpts = computeCellOpts.value
       const validOpts = computeValidOpts.value
@@ -121,19 +122,21 @@ export default defineComponent({
       const columnOpts = computeColumnOpts.value
       const mouseOpts = computeMouseOpts.value
       const areaOpts = computeAreaOpts.value
+      const cellOffsetWidth = computeCellOffsetWidth.value
       const { selectCellToRow } = areaOpts
       const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column
       const { verticalAlign: allVerticalAlign } = cellOpts
       const { actived } = editStore
-      const rowRest = fullAllDataRowIdData[rowid]
+      const rowRest = fullAllDataRowIdData[rowid] || {}
       const colid = column.id
+      const colRest = fullColumnIdData[colid] || {}
       const renderOpts = editRender || cellRender
       const compConf = renderOpts ? renderer.get(renderOpts.name) : null
       const compCellClassName = compConf ? (compConf.tableCellClassName || compConf.cellClassName) : null
       const compCellStyle = compConf ? (compConf.tableCellStyle || compConf.cellStyle) : ''
       const showAllTip = tooltipOpts.showAll
-      const columnIndex = $xeTable.getColumnIndex(column)
-      const _columnIndex = $xeTable.getVTColumnIndex(column)
+      const columnIndex = colRest.index
+      const _columnIndex = colRest._index
       const isEdit = isEnableConf(editRender)
       const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0
       let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX
@@ -157,7 +160,7 @@ export default defineComponent({
         $table: VxeTableConstructor<any> & VxeTablePrivateMethods
       } = {
         $table: $xeTable,
-        $grid: $xeTable.xegrid,
+        $grid: $xeGrid,
         isEdit: false,
         seq,
         rowid,
@@ -290,6 +293,18 @@ export default defineComponent({
       }
 
       const tcStyle: Record<string, string> = {}
+      if (hasEllipsis && resizeWidthFlag) {
+        let tsColspan = tdAttrs.colspan || 0
+        if (tsColspan > 1) {
+          for (let index = 1; index < tsColspan; index++) {
+            const nextColumn = visibleColumn[columnIndex + index]
+            if (nextColumn) {
+              tsColspan += nextColumn.renderWidth
+            }
+          }
+        }
+        tcStyle.width = `${column.renderWidth - (cellOffsetWidth * tsColspan)}px`
+      }
       if (scrollYLoad || hasEllipsis || isCsHeight || isRsHeight) {
         tcStyle.height = `${cellHeight}px`
       } else {
@@ -312,7 +327,7 @@ export default defineComponent({
       } else {
         // 渲染单元格
         tdVNs.push(
-          ...renderLine(cellParams, cellHeight),
+          ...renderLine(rowid, cellParams, cellHeight),
           h('div', {
             key: 'tc',
             class: ['vxe-cell', {
@@ -436,8 +451,8 @@ 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, rowExpandHeightFlag } = tableReactData
-      const { fullAllDataRowIdData } = tableInternalData
+      const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag } = tableReactData
+      const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
       const treeOpts = computeTreeOpts.value
@@ -448,6 +463,7 @@ export default defineComponent({
       const { transform, seqMode } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
+      const { handleGetRowId } = createHandleGetRowId($xeTable)
       tableData.forEach((row, $rowIndex) => {
         const trOn: Record<string, any> = {}
         let rowIndex = $rowIndex
@@ -468,8 +484,8 @@ export default defineComponent({
             $xeTable.clearHoverRow()
           }
         }
-        const rowid = getRowid($xeTable, row)
-        const rowRest = fullAllDataRowIdData[rowid]
+        const rowid = handleGetRowId(row)
+        const rowRest = fullAllDataRowIdData[rowid] || {}
         let rowLevel = 0
         let seq: string | number = -1
         let _rowIndex = 0
@@ -484,7 +500,7 @@ export default defineComponent({
         }
         const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
         // 行是否被展开
-        const isExpandRow = expandColumn && !!rowExpandedMaps[rowid]
+        const isExpandRow = expandColumn && !!rowExpandedFlag && !!rowExpandedMaps[rowid]
         // 树节点是否被展开
         let isExpandTree = false
         let rowChildren = []
@@ -494,7 +510,7 @@ export default defineComponent({
         }
         if (treeConfig && !scrollYLoad && !transform) {
           rowChildren = row[childrenField]
-          isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
+          isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
         }
         // 拖拽行事件
         if (rowOpts.drag && (!treeConfig || transform)) {
@@ -513,7 +529,7 @@ export default defineComponent({
             'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
             'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
             'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-            'row--pending': !!pendingRowMaps[rowid]
+            'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
           },
           getPropClass(rowClassName, params)
         ]
@@ -639,6 +655,7 @@ export default defineComponent({
 
     const renderVN = () => {
       const { slots } = tableContext
+      const $xeGrid = $xeTable.xeGrid
 
       const { fixedColumn, fixedType, tableColumn } = props
       const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
@@ -662,7 +679,7 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }
 
@@ -723,7 +740,7 @@ export default defineComponent({
       let emptyContent: string | VxeComponentSlotType | VxeComponentSlotType[]
       const emptySlot = slots ? slots.empty : null
       if (emptySlot) {
-        emptyContent = $xeTable.callSlot(emptySlot, { $table: $xeTable, $grid: $xeTable.xegrid })
+        emptyContent = $xeTable.callSlot(emptySlot, { $table: $xeTable, $grid: $xeGrid })
       } else {
         const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null
         const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null
@@ -776,7 +793,10 @@ export default defineComponent({
             }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
-                key: $columnIndex
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
+                }
               })
             })),
             /**