vxe-table 3.12.10-beta.8 → 3.12.10

package/packages/table/src/props.ts

@@ -34,10 +34,10 @@ export default {
     type: [Boolean, String] as PropType<VxeTablePropTypes.Border>,
     default: () => getConfig().table.border
   },
-  // 单元格是否有边距
+  // 已废弃，被 cell-config.padding 替换
   padding: {
     type: Boolean as PropType<VxeTablePropTypes.Padding>,
-    default: () => getConfig().table.padding
+    default: null
   },
   // 是否圆角边框
   round: {
@@ -86,14 +86,20 @@ export default {
     type: Boolean,
     default: () => getConfig().table.highlightHoverRow
   },
-  // 已废弃，被 column-config.isCurrent 替换
+  /**
+   * （即将废弃）是否要高亮当前选中列
+   * @deprecated
+   */
   highlightCurrentColumn: {
-    type: Boolean,
+    type: Boolean as PropType<VxeTablePropTypes.HighlightCurrentColumn>,
     default: () => getConfig().table.highlightCurrentColumn
   },
-  // 已废弃，被 column-config.isHover 替换
+  /**
+   * （即将废弃）鼠标移到列是否要高亮显示
+   * @deprecated
+   */
   highlightHoverColumn: {
-    type: Boolean,
+    type: Boolean as PropType<VxeTablePropTypes.HighlightHoverColumn>,
     default: () => getConfig().table.highlightHoverColumn
   },
   // 已废弃，直接删除
@@ -163,6 +169,10 @@ export default {
   columnConfig: Object,
   // 单元格配置信息
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
+  // 表头单元格配置信息
+  headerCellConfig: Object as PropType<VxeTablePropTypes.HeaderCellConfig>,
+  // 表尾单元格配置信息
+  footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
   // 行配置信息
   rowConfig: Object,
   // 已废弃，被 rowDragConfig 替换

package/packages/table/src/table.ts

@@ -178,7 +178,7 @@ const renderDragTip = (h: CreateElement, $xeTable: any) => {
   return renderEmptyElement($xeTable)
 }
 
-function handleUupdateResize (_vm: any) {
+function handleUpdateResize (_vm: any) {
   const { $el } = _vm
   if ($el && $el.clientWidth && $el.clientHeight) {
     _vm.recalculate()
@@ -362,8 +362,7 @@ export default {
     const xID = XEUtils.uniqueId()
     return {
       xID,
-      tId: `${XEUtils.uniqueId()}`,
-      isCalcColumn: false,
+      tId: xID,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -576,7 +575,8 @@ export default {
 
       scrollVMLoading: false,
 
-      isCalcCellHeight: 0,
+      calcCellHeightFlag: 0,
+      resizeHeightFlag: 0,
 
       isCustomStatus: false,
 
@@ -586,8 +586,9 @@ export default {
       dragCol: null,
       dragTipText: '',
 
-      _isResize: false,
-      isLoading: false,
+      isDragResize: false,
+      isRowLoading: false,
+      isColLoading: false,
 
       reScrollFlag: 0,
       reLayoutFlag: 0,
@@ -695,7 +696,7 @@ export default {
 
       const vSize = $xeTable.computeSize
       const rowHeightMaps = $xeTable.computeRowHeightMaps
-      return rowHeightMaps[vSize || 'default']
+      return rowHeightMaps[vSize || 'default'] || 18
     },
     columnOpts () {
       return this.computeColumnOpts
@@ -704,7 +705,22 @@ export default {
       return Object.assign({}, getConfig().table.columnConfig, this.columnConfig)
     },
     computeCellOpts () {
-      return Object.assign({}, getConfig().table.cellConfig, this.cellConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.cellConfig, props.cellConfig)
+    },
+    computeHeaderCellOpts () {
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
+    },
+    computeFooterCellOpts () {
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig)
     },
     rowOpts () {
       return this.computeRowOpts
@@ -757,6 +773,20 @@ export default {
     tipConfig () {
       return { ...this.tooltipOpts }
     },
+    computeTableTipConfig () {
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { tooltipStore } = reactData
+      const tooltipOpts = $xeTable.computeTooltipOpts
+      return Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+    },
+    computeValidTipConfig () {
+      const $xeTable = this
+
+      const tooltipOpts = $xeTable.computeTooltipOpts
+      return Object.assign({}, tooltipOpts)
+    },
     validTipOpts () {
       return Object.assign({ isArrow: false }, this.tooltipOpts)
     },
@@ -809,24 +839,59 @@ export default {
       return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig)
     },
     headerCtxMenu () {
-      const headerOpts = this.ctxMenuOpts.header
+      return this.computeHeaderMenu
+    },
+    computeHeaderMenu () {
+      const $xeTable = this
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const headerOpts = menuOpts.header
       return headerOpts && headerOpts.options ? headerOpts.options : []
     },
     bodyCtxMenu () {
-      const bodyOpts = this.ctxMenuOpts.body
+      return this.computeBodyMenu
+    },
+    computeBodyMenu () {
+      const $xeTable = this
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const bodyOpts = menuOpts.body
       return bodyOpts && bodyOpts.options ? bodyOpts.options : []
     },
     footerCtxMenu () {
-      const footerOpts = this.ctxMenuOpts.footer
+      return this.computeFooterMenu
+    },
+    computeFooterMenu () {
+      const $xeTable = this
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const footerOpts = menuOpts.footer
       return footerOpts && footerOpts.options ? footerOpts.options : []
     },
     isCtxMenu () {
-      return !!((this.contextMenu || this.menuConfig) && isEnableConf(this.ctxMenuOpts) && (this.headerCtxMenu.length || this.bodyCtxMenu.length || this.footerCtxMenu.length))
+      return this.computeIsMenu
+    },
+    computeIsMenu () {
+      const $xeTable = this
+      const props = $xeTable
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const headerMenu = $xeTable.computeHeaderMenu
+      const bodyMenu = $xeTable.computeBodyMenu
+      const footerMenu = $xeTable.computeFooterMenu
+      return !!((props.contextMenu || props.menuConfig) && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length))
     },
     ctxMenuList () {
+      return this.computeMenuList
+    },
+    computeMenuList () {
+      const $xeTable = this
+      const reactData = $xeTable as TableReactData
+
+      const { ctxMenuStore } = reactData
       const rest: any[] = []
-      this.ctxMenuStore.list.forEach((list: any[]) => {
-        list.forEach(item => {
+      ctxMenuStore.list.forEach((list) => {
+        list.forEach((item) => {
           rest.push(item)
         })
       })
@@ -1010,7 +1075,7 @@ export default {
       if (value && value.length >= 50000) {
         warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)'])
       }
-      this.loadTableData(value || []).then(() => {
+      this.loadTableData(value || [], true).then(() => {
         this.inited = true
         this.initStatus = true
         if (!initStatus) {
@@ -1085,10 +1150,10 @@ export default {
 
     syncResize (value: any) {
       if (value) {
-        handleUupdateResize(this)
+        handleUpdateResize(this)
         this.$nextTick(() => {
-          handleUupdateResize(this)
-          setTimeout(() => handleUupdateResize(this))
+          handleUpdateResize(this)
+          setTimeout(() => handleUpdateResize(this))
         })
       }
     },
@@ -1192,11 +1257,14 @@ export default {
       if (treeConfig && (treeOpts.showLine || treeOpts.line) && (!(this.rowKey || rowOpts.useKey) || !showOverflow)) {
         warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow'])
       }
+      if (treeConfig && !treeOpts.transform && this.stripe) {
+        warnLog('vxe.error.noTree', ['stripe'])
+      }
       if (this.showFooter && !(this.footerMethod || this.footerData)) {
         warnLog('vxe.error.reqProp', ['footer-data | footer-method'])
       }
-      if (treeConfig && !treeOpts.transform && this.stripe) {
-        warnLog('vxe.error.noTree', ['stripe'])
+      if (rowOpts.height) {
+        warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height'])
       }
       if (this.tooltipOpts.enabled) {
         warnLog('vxe.error.delProp', ['tooltip-config.enabled', 'tooltip-config.showAll'])
@@ -1342,7 +1410,7 @@ export default {
       endIndex: 1,
       visibleSize: 0
     })
-    this.loadTableData(data).then(() => {
+    this.loadTableData(data, true).then(() => {
       if (data && data.length) {
         this.inited = true
         this.initStatus = true
@@ -1458,10 +1526,11 @@ export default {
     const { xID } = $xeTable
 
     const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-    const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
+    const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore } = reactData
     const { leftList, rightList } = columnStore
     const loadingSlot = slots.loading
-    const tooltipOpts = $xeTable.computeTooltipOpts
+    const tableTipConfig = $xeTable.computeTableTipConfig
+    const validTipConfig = $xeTable.computeValidTipConfig
     const validOpts = $xeTable.computeValidOpts
     const checkboxOpts = $xeTable.computeCheckboxOpts
     const treeOpts = $xeTable.computeTreeOpts
@@ -1473,7 +1542,7 @@ export default {
     const areaOpts = $xeTable.computeAreaOpts
     const loadingOpts = $xeTable.computeLoadingOpts
     const isMenu = $xeTable.computeIsMenu
-    const currLoading = reactData.isLoading || loading
+    const currLoading = reactData.isColLoading || reactData.isRowLoading || loading
     const resizableOpts = $xeTable.computeResizableOpts
     const isArea = mouseConfig && mouseOpts.area
     const columnDragOpts = $xeTable.computeColumnDragOpts
@@ -1494,7 +1563,6 @@ export default {
         'row--highlight': rowOpts.isHover || highlightHoverRow,
         'column--highlight': columnOpts.isHover || highlightHoverColumn,
         'checkbox--range': checkboxOpts.range,
-        'column--calc': isCalcColumn,
         'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
         'is--header': showHeader,
         'is--footer': showFooter,
@@ -1503,7 +1571,6 @@ export default {
         'is--fixed-left': leftList.length,
         'is--fixed-right': rightList.length,
         'is--animat': !!props.animat,
-        'is--padding': props.padding,
         'is--round': props.round,
         'is--stripe': !treeConfig && stripe,
         'is--loading': currLoading,
@@ -1562,13 +1629,27 @@ export default {
        * 列宽线
        */
       h('div', {
-        key: 'cl',
-        ref: 'refCellResizeBar',
-        class: 'vxe-table--resizable-bar'
+        key: 'tcl',
+        ref: 'refColResizeBar',
+        class: 'vxe-table--resizable-col-bar'
+      }, resizableOpts.showDragTip
+        ? [
+            h('div', {
+              ref: 'refColResizeTip',
+              class: 'vxe-table--resizable-number-tip'
+            })
+          ]
+        : []),
+      /**
+       * 行高线
+       */
+      h('div', {
+        key: 'trl',
+        ref: 'refRowResizeBar',
+        class: 'vxe-table--resizable-row-bar'
       }, resizableOpts.showDragTip
         ? [
             h('div', {
-              ref: 'refCellResizeTip',
               class: 'vxe-table--resizable-number-tip'
             })
           ]
@@ -1683,8 +1764,13 @@ export default {
         VxeUITooltipComponent
           ? h(VxeUITooltipComponent, {
             key: 'btp',
-            ref: 'tooltip',
-            props: Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+            ref: 'refTooltip',
+            props: {
+              theme: tableTipConfig.theme,
+              enterable: tableTipConfig.enterable,
+              enterDelay: tableTipConfig.enterDelay,
+              leaveDelay: tableTipConfig.leaveDelay
+            }
           })
           : renderEmptyElement($xeTable),
         /**
@@ -1697,7 +1783,12 @@ export default {
             class: [{
               'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
             }, 'vxe-table--valid-error'],
-            props: validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({ isArrow: false }, tooltipOpts) : {}
+            props: {
+              theme: validTipConfig.theme,
+              enterable: validTipConfig.enterable,
+              enterDelay: validTipConfig.enterDelay,
+              leaveDelay: validTipConfig.leaveDelay
+            }
           })
           : renderEmptyElement($xeTable)
       ])

package/packages/table/src/util.ts

@@ -3,7 +3,7 @@ import { ColumnInfo } from './columnInfo'
 import { isScale, isPx } from '../../ui/src/dom'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeTableConstructor, TableReactData } from '../../../types'
+import type { VxeTableDefines, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePrivateMethods } from '../../../types'
 
 const getAllConvertColumns = (columns: any, parentColumn?: any) => {
   const result: any[] = []
@@ -132,9 +132,16 @@ function getElementMarginWidth (elem: any) {
   return 0
 }
 
+export function getCellHeight (height: number | 'unset' | undefined | null) {
+  if (height === 'unset') {
+    return 0
+  }
+  return height || 0
+}
+
 export function handleFieldOrColumn (_vm: any, fieldOrColumn: any) {
   if (fieldOrColumn) {
-    return XEUtils.isString(fieldOrColumn) ? _vm.getColumnByField(fieldOrColumn) : fieldOrColumn
+    return XEUtils.isString(fieldOrColumn) || XEUtils.isNumber(fieldOrColumn) ? _vm.getColumnByField(`${fieldOrColumn}`) : fieldOrColumn
   }
   return null
 }
@@ -200,6 +207,7 @@ export function toFilters (filters: any) {
 
 export function getColReMinWidth (params: any) {
   const { $table, column, cell } = params
+  const internalData = $table
   const { showHeaderOverflow: allColumnHeaderOverflow, resizableOpts } = $table
   const { minWidth } = resizableOpts
   // 如果自定义调整宽度逻辑
@@ -209,6 +217,7 @@ export function getColReMinWidth (params: any) {
       return Math.max(1, XEUtils.toNumber(customMinWidth))
     }
   }
+  const { elemStore } = internalData
   const { showHeaderOverflow, minWidth: colMinWidth } = column
   const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
   const showEllipsis = headOverflow === 'ellipsis'
@@ -232,11 +241,10 @@ export function getColReMinWidth (params: any) {
   }
   // 如果设置最小宽
   if (colMinWidth) {
-    const { refTableBody } = $table.$refs
-    const bodyElem = refTableBody ? refTableBody.$el : null
-    if (bodyElem) {
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    if (bodyScrollElem) {
       if (isScale(colMinWidth)) {
-        const bodyWidth = bodyElem.clientWidth - 1
+        const bodyWidth = bodyScrollElem.clientWidth - 1
         const meanWidth = bodyWidth / 100
         return Math.max(mWidth, Math.floor(XEUtils.toInteger(colMinWidth) * meanWidth))
       } else if (isPx(colMinWidth)) {
@@ -280,13 +288,32 @@ export function getOffsetSize ($xeTable: VxeTableConstructor) {
 }
 
 export function calcTreeLine (params: VxeTableDefines.CellRenderBodyParams, prevRow: any) {
-  const { $table } = params
+  const { $table, row } = params
+  const tableProps = $table
   const tableReactData = $table as unknown as TableReactData
+  const tableInternalData = $table as unknown as TableInternalData
+
+  const { showOverflow } = tableProps
+  const { scrollYLoad } = tableReactData
+  const { fullAllDataRowIdData } = tableInternalData
+  const rowOpts = $table.computeRowOpts
+  const cellOpts = $table.computeCellOpts
+  const defaultRowHeight = $table.computeDefaultRowHeight
+  const rowid = getRowid($table, row)
+  const rowRest = fullAllDataRowIdData[rowid]
+  const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || defaultRowHeight
   let expandSize = 1
   if (prevRow) {
     expandSize = countTreeExpand(prevRow, params)
   }
-  return tableReactData.rowHeight * expandSize - (prevRow ? 1 : (12 - getOffsetSize($table)))
+  let cellHeight = currCellHeight
+  const vnHeight = rowRest.height
+  if (scrollYLoad) {
+    if (!showOverflow) {
+      cellHeight = vnHeight || currCellHeight
+    }
+  }
+  return cellHeight * expandSize - (prevRow ? 1 : (12 - getOffsetSize($table)))
 }
 
 export function mergeBodyMethod (mergeList: any, _rowIndex: any, _columnIndex: any) {
@@ -354,34 +381,29 @@ export function isColumnInfo (column: any) {
   return column instanceof ColumnInfo
 }
 
-export function createColumn ($xeTable: any, options: any, renderOptions: any): any {
+export function createColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, options: any, renderOptions: any): any {
   return isColumnInfo(options) ? options : new ColumnInfo($xeTable, options, renderOptions)
 }
 
-export function rowToVisible ($xeTable: any, row: any) {
-  const reactData = $xeTable
-  const internalData = $xeTable
+export function rowToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any) {
   const tableProps = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
   const { showOverflow } = tableProps
-  const refTableBody: any = $xeTable.$refs.refTableBody
-  const { columnStore, scrollYLoad } = reactData
-  const { afterFullData, scrollYStore, fullAllDataRowIdData } = internalData
-  const { rowHeight } = scrollYStore
-  const { leftList, rightList } = columnStore
-  const bodyElem = refTableBody ? refTableBody.$el as HTMLDivElement : null
+  const { scrollYLoad } = reactData
+  const { elemStore, afterFullData, fullAllDataRowIdData, isResizeCellHeight } = internalData
+  const rowOpts = $xeTable.computeRowOpts
+  const cellOpts = $xeTable.computeCellOpts
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight
+  const leftFixedWidth = $xeTable.computeLeftFixedWidth
+  const rightFixedWidth = $xeTable.computeRightFixedWidth
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
   const rowid = getRowid($xeTable, row)
-  let offsetFixedLeft = 0
-  leftList.forEach((item: any) => {
-    offsetFixedLeft += item.renderWidth
-  })
-  let offsetFixedRight = 0
-  rightList.forEach((item: any) => {
-    offsetFixedRight += item.renderWidth
-  })
-  if (bodyElem) {
-    const bodyHeight = bodyElem.clientHeight
-    const bodyScrollTop = bodyElem.scrollTop
-    const trElem: HTMLTableRowElement | null = bodyElem.querySelector(`[rowid="${rowid}"]`)
+  if (bodyScrollElem) {
+    const bodyHeight = bodyScrollElem.clientHeight
+    const bodyScrollTop = bodyScrollElem.scrollTop
+    const trElem: HTMLTableRowElement | null = bodyScrollElem.querySelector(`[rowid="${rowid}"]`)
     if (trElem) {
       const trOffsetParent = trElem.offsetParent as HTMLElement
       const trOffsetTop = trElem.offsetTop + (trOffsetParent ? trOffsetParent.offsetTop : 0)
@@ -395,12 +417,13 @@ export function rowToVisible ($xeTable: any, row: any) {
     } else {
       // 如果是虚拟渲染滚动
       if (scrollYLoad) {
-        if (showOverflow) {
-          return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * rowHeight)
+        const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
+        if (!isCustomCellHeight && showOverflow) {
+          return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * defaultRowHeight)
         }
         let scrollTop = 0
         const rowRest = fullAllDataRowIdData[rowid]
-        const rHeight = rowRest ? (rowRest.height || rowHeight) : rowHeight
+        const rHeight = rowRest ? (rowRest.resizeHeight || cellOpts.height || rowOpts.height || defaultRowHeight) : defaultRowHeight
         for (let i = 0; i < afterFullData.length; i++) {
           const currRow = afterFullData[i]
           const currRowid = getRowid($xeTable, currRow)
@@ -408,54 +431,50 @@ export function rowToVisible ($xeTable: any, row: any) {
             break
           }
           const rowRest = fullAllDataRowIdData[currRowid]
-          scrollTop += rowRest ? (rowRest.height || rowHeight) : rowHeight
+          scrollTop += rowRest ? (rowRest.resizeHeight || cellOpts.height || rowOpts.height || defaultRowHeight) : defaultRowHeight
         }
         if (scrollTop < bodyScrollTop) {
-          return $xeTable.scrollTo(null, scrollTop - offsetFixedLeft - 1)
+          return $xeTable.scrollTo(null, scrollTop - leftFixedWidth - 1)
         }
-        return $xeTable.scrollTo(null, (scrollTop + rHeight) - (bodyHeight - offsetFixedRight - 1))
+        return $xeTable.scrollTo(null, (scrollTop + rHeight) - (bodyHeight - rightFixedWidth - 1))
       }
     }
   }
   return Promise.resolve()
 }
 
-export function colToVisible ($xeTable: any, column: any, row?: any) {
-  const { columnStore, scrollXLoad, visibleColumn } = $xeTable
-  const refTableBody: any = $xeTable.$refs.refTableBody
-  const { leftList, rightList } = columnStore
-  const bodyElem = refTableBody ? refTableBody.$el : null
+export function colToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, column: VxeTableDefines.ColumnInfo, row?: any) {
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { scrollXLoad } = reactData
+  const { elemStore, visibleColumn } = internalData
+  const leftFixedWidth = $xeTable.computeLeftFixedWidth
+  const rightFixedWidth = $xeTable.computeRightFixedWidth
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
   if (column.fixed) {
     return Promise.resolve()
   }
-  let offsetFixedLeft = 0
-  leftList.forEach((item: any) => {
-    offsetFixedLeft += item.renderWidth
-  })
-  let offsetFixedRight = 0
-  rightList.forEach((item: any) => {
-    offsetFixedRight += item.renderWidth
-  })
-  if (bodyElem) {
-    const bodyWidth = bodyElem.clientWidth
-    const bodyScrollLeft = bodyElem.scrollLeft
+  if (bodyScrollElem) {
+    const bodyWidth = bodyScrollElem.clientWidth
+    const bodyScrollLeft = bodyScrollElem.scrollLeft
     let tdElem: HTMLTableCellElement | null = null
     if (row) {
       const rowid = getRowid($xeTable, row)
-      tdElem = bodyElem.querySelector(`[rowid="${rowid}"] .${column.id}`)
+      tdElem = bodyScrollElem.querySelector(`[rowid="${rowid}"] .${column.id}`)
     }
     if (!tdElem) {
-      tdElem = bodyElem.querySelector(`.${column.id}`)
+      tdElem = bodyScrollElem.querySelector(`.${column.id}`)
     }
     if (tdElem) {
       const tdOffsetParent = tdElem.offsetParent as HTMLElement
       const tdOffsetLeft = tdElem.offsetLeft + (tdOffsetParent ? tdOffsetParent.offsetLeft : 0)
       const cellWidth = tdElem.clientWidth
       // 检测是否在可视区中
-      if (tdOffsetLeft < (bodyScrollLeft + offsetFixedLeft)) {
-        return $xeTable.scrollTo(tdOffsetLeft - offsetFixedLeft - 1)
-      } else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - offsetFixedRight)) {
-        return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1))
+      if (tdOffsetLeft < (bodyScrollLeft + leftFixedWidth)) {
+        return $xeTable.scrollTo(tdOffsetLeft - leftFixedWidth - 1)
+      } else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - rightFixedWidth)) {
+        return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - rightFixedWidth - 1))
       }
     } else {
       // 检测是否在虚拟渲染可视区中
@@ -463,15 +482,16 @@ export function colToVisible ($xeTable: any, column: any, row?: any) {
         let scrollLeft = 0
         const cellWidth = column.renderWidth
         for (let i = 0; i < visibleColumn.length; i++) {
-          if (visibleColumn[i] === column) {
+          const currCol = visibleColumn[i]
+          if (currCol === column || currCol.id === column.id) {
             break
           }
-          scrollLeft += visibleColumn[i].renderWidth
+          scrollLeft += currCol.renderWidth
         }
         if (scrollLeft < bodyScrollLeft) {
-          return $xeTable.scrollTo(scrollLeft - offsetFixedLeft - 1)
+          return $xeTable.scrollTo(scrollLeft - leftFixedWidth - 1)
         }
-        return $xeTable.scrollTo((scrollLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1))
+        return $xeTable.scrollTo((scrollLeft + cellWidth) - (bodyWidth - rightFixedWidth - 1))
       }
     }
   }

package/packages/ui/index.ts

@@ -41,7 +41,10 @@ VxeUI.setConfig({
     },
     resizableConfig: {
       dragMode: 'auto',
-      showDragTip: true
+      showDragTip: true,
+      isSyncAutoHeight: true,
+      isSyncAutoWidth: true,
+      minHeight: 18
     },
     radioConfig: {
       // trigger: 'default'
@@ -75,6 +78,15 @@ VxeUI.setConfig({
     columnConfig: {
       maxFixedSize: 4
     },
+    cellConfig: {
+      padding: true
+    },
+    headerCellConfig: {
+      height: 'unset'
+    },
+    footerCellConfig: {
+      height: 'unset'
+    },
     // menuConfig: {
     //   visibleMethod () {}
     // },
@@ -108,6 +120,8 @@ VxeUI.setConfig({
       // orders: ['asc', 'desc', null],
       // sortMethod: null,
       showIcon: true,
+      allowClear: true,
+      allowBtn: true,
       iconLayout: 'vertical'
     },
     filterConfig: {
@@ -180,18 +194,20 @@ VxeUI.setConfig({
       isReplace: true
     },
     virtualXConfig: {
-      // enabled: false,
-      gt: 60
-      // oSize: 0
+      enabled: true,
+      gt: 60,
+      preSize: 0,
+      oSize: 1
     },
     virtualYConfig: {
-      // enabled: false,
-      gt: 100
-      // oSize: 0
+      enabled: true,
+      gt: 100,
+      preSize: 1,
+      oSize: 2
     },
     scrollbarConfig: {
-      width: 10,
-      height: 10
+      // width: 0,
+      // height: 0
     }
   },
   // export: {