vxe-table 3.11.38 → 3.12.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/es/index.css +1 -1
  2. package/es/index.min.css +1 -1
  3. package/es/style.css +1 -1
  4. package/es/style.min.css +1 -1
  5. package/es/table/render/index.js +47 -12
  6. package/es/table/src/body.js +81 -35
  7. package/es/table/src/footer.js +54 -18
  8. package/es/table/src/header.js +58 -10
  9. package/es/table/src/methods.js +159 -118
  10. package/es/table/src/table.js +5 -13
  11. package/es/table/style.css +3 -5
  12. package/es/table/style.min.css +1 -1
  13. package/es/ui/index.js +5 -3
  14. package/es/ui/src/log.js +1 -1
  15. package/es/vxe-table/style.css +3 -5
  16. package/es/vxe-table/style.min.css +1 -1
  17. package/lib/index.css +1 -1
  18. package/lib/index.min.css +1 -1
  19. package/lib/index.umd.js +464 -272
  20. package/lib/index.umd.min.js +1 -1
  21. package/lib/style.css +1 -1
  22. package/lib/style.min.css +1 -1
  23. package/lib/table/render/index.js +47 -12
  24. package/lib/table/render/index.min.js +1 -1
  25. package/lib/table/src/body.js +101 -56
  26. package/lib/table/src/body.min.js +1 -1
  27. package/lib/table/src/footer.js +67 -30
  28. package/lib/table/src/footer.min.js +1 -1
  29. package/lib/table/src/header.js +71 -18
  30. package/lib/table/src/header.min.js +1 -1
  31. package/lib/table/src/methods.js +167 -137
  32. package/lib/table/src/methods.min.js +1 -1
  33. package/lib/table/src/table.js +5 -15
  34. package/lib/table/src/table.min.js +1 -1
  35. package/lib/table/style/style.css +3 -5
  36. package/lib/table/style/style.min.css +1 -1
  37. package/lib/ui/index.js +5 -3
  38. package/lib/ui/index.min.js +1 -1
  39. package/lib/ui/src/log.js +1 -1
  40. package/lib/ui/src/log.min.js +1 -1
  41. package/lib/vxe-table/style/style.css +3 -5
  42. package/lib/vxe-table/style/style.min.css +1 -1
  43. package/package.json +2 -2
  44. package/packages/table/render/index.ts +48 -12
  45. package/packages/table/src/body.ts +84 -35
  46. package/packages/table/src/footer.ts +58 -18
  47. package/packages/table/src/header.ts +62 -11
  48. package/packages/table/src/methods.ts +163 -126
  49. package/packages/table/src/table.ts +6 -15
  50. package/packages/ui/index.ts +4 -2
  51. package/styles/components/table.scss +1 -3
  52. /package/es/{iconfont.1735003904481.ttf → iconfont.1735106128767.ttf} +0 -0
  53. /package/es/{iconfont.1735003904481.woff → iconfont.1735106128767.woff} +0 -0
  54. /package/es/{iconfont.1735003904481.woff2 → iconfont.1735106128767.woff2} +0 -0
  55. /package/lib/{iconfont.1735003904481.ttf → iconfont.1735106128767.ttf} +0 -0
  56. /package/lib/{iconfont.1735003904481.woff → iconfont.1735106128767.woff} +0 -0
  57. /package/lib/{iconfont.1735003904481.woff2 → iconfont.1735106128767.woff2} +0 -0
@@ -11,9 +11,6 @@ import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf } from
11
11
 
12
12
  const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
13
13
 
14
- // const isWebkit = browse['-webkit'] && !browse.edge
15
- // const debounceScrollYDuration = browse.msie ? 80 : 20
16
-
17
14
  const customStorageKey = 'VXE_CUSTOM_STORE'
18
15
 
19
16
  // 获取所有的列,排除分组
@@ -300,7 +297,7 @@ const calcCellHeight = ($xeTable: any) => {
300
297
  const { showOverflow } = props
301
298
  const { tableData, scrollXLoad, scrollYLoad } = reactData
302
299
  const { fullAllDataRowIdData } = internalData
303
- const el = $xeTable.$el
300
+ const el = $xeTable.$refs.refElem as HTMLDivElement
304
301
  if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
305
302
  let paddingTop = 0
306
303
  let paddingBottom = 0
@@ -308,28 +305,27 @@ const calcCellHeight = ($xeTable: any) => {
308
305
  tableData.forEach((row: any) => {
309
306
  const rowid = getRowid($xeTable, row)
310
307
  const rowRest = fullAllDataRowIdData[rowid]
311
- const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`)
312
- if (rowRest && trList.length) {
308
+ const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`)
309
+ if (rowRest && cellList.length) {
313
310
  let height = 0
314
- for (let i = 0; i < trList.length; i++) {
315
- const trEl = trList[i] as HTMLTableRowElement
316
- const tdList = trEl.children
317
- for (let j = 0; j < tdList.length; j++) {
318
- const tdEl = tdList[j]
319
- const cellElem = tdEl.querySelector('.vxe-cell') as HTMLDivElement
320
- if (!calcPadding) {
321
- paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
322
- paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
323
- calcPadding = true
324
- }
325
- let cellHeight = paddingTop + paddingBottom
326
- if (cellElem) {
327
- cellHeight += cellElem.offsetHeight
328
- }
329
- height = Math.max(height, cellHeight)
311
+ for (let i = 0; i < cellList.length; i++) {
312
+ const cellElem = cellList[i] as HTMLElement
313
+ const tdEl = cellElem.parentElement as HTMLTableCellElement
314
+ if (!tdEl || !tdEl.clientWidth) {
315
+ break
316
+ }
317
+ if (!calcPadding) {
318
+ paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
319
+ paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
320
+ calcPadding = true
321
+ }
322
+ let cellHeight = paddingTop + paddingBottom
323
+ if (cellElem) {
324
+ cellHeight += cellElem.clientHeight
330
325
  }
326
+ height = Math.max(height, cellHeight)
331
327
  }
332
- rowRest.height = height
328
+ rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height
333
329
  }
334
330
  })
335
331
  }
@@ -450,15 +446,22 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
450
446
  const { scrollbarWidth, scrollbarHeight } = reactData
451
447
  const { prevDragToChild } = internalData
452
448
  const wrapperRect = el.getBoundingClientRect()
449
+ const tableWidth = el.clientWidth
450
+ const tableHeight = el.clientHeight
453
451
  if (trEl) {
454
452
  const rdLineEl = $xeTable.$refs.refDragRowLineElem as HTMLElement
455
453
  if (rdLineEl) {
456
454
  if (showLine) {
457
455
  const trRect = trEl.getBoundingClientRect()
456
+ let trHeight = trEl.clientHeight
457
+ const offsetTop = Math.max(1, trRect.y - wrapperRect.y)
458
+ if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
459
+ trHeight = tableHeight - offsetTop - scrollbarHeight
460
+ }
458
461
  rdLineEl.style.display = 'block'
459
- rdLineEl.style.top = `${Math.max(1, trRect.y - wrapperRect.y)}px`
460
- rdLineEl.style.height = `${trRect.height}px`
461
- rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`
462
+ rdLineEl.style.top = `${offsetTop}px`
463
+ rdLineEl.style.height = `${trHeight}px`
464
+ rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`
462
465
  rdLineEl.setAttribute('drag-pos', dragPos)
463
466
  rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
464
467
  } else {
@@ -469,16 +472,31 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
469
472
  const cdLineEl = $xeTable.$refs.refDragColLineElem as HTMLElement
470
473
  if (cdLineEl) {
471
474
  if (showLine) {
475
+ const leftContainerElem = $xeTable.$refs.leftContainer as HTMLDivElement
476
+ const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
477
+ const rightContainerElem = $xeTable.$refs.rightContainer as HTMLDivElement
478
+ const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
472
479
  const thRect = thEl.getBoundingClientRect()
480
+ let thWidth = thEl.clientWidth
473
481
  const offsetTop = Math.max(0, thRect.y - wrapperRect.y)
482
+ const startX = leftContainerWidth
483
+ let offsetLeft = thRect.x - wrapperRect.x
484
+ if (offsetLeft < startX) {
485
+ thWidth -= startX - offsetLeft
486
+ offsetLeft = startX
487
+ }
488
+ const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : scrollbarWidth)
489
+ if (offsetLeft + thWidth > endX) {
490
+ thWidth = endX - offsetLeft
491
+ }
474
492
  cdLineEl.style.display = 'block'
475
493
  cdLineEl.style.top = `${offsetTop}px`
476
- cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`
477
- cdLineEl.style.width = `${thRect.width}px`
494
+ cdLineEl.style.left = `${offsetLeft}px`
495
+ cdLineEl.style.width = `${thWidth}px`
478
496
  if (prevDragToChild) {
479
497
  cdLineEl.style.height = `${thRect.height}px`
480
498
  } else {
481
- cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`
499
+ cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`
482
500
  }
483
501
  cdLineEl.setAttribute('drag-pos', dragPos)
484
502
  cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
@@ -925,7 +943,7 @@ const Methods = {
925
943
  ).then(() => {
926
944
  this._isLoading = false
927
945
  this.cacheColumnMap()
928
- this.parseColumns().then(() => {
946
+ this.parseColumns(true).then(() => {
929
947
  if (this.scrollXLoad) {
930
948
  this.loadScrollXData(true)
931
949
  }
@@ -2466,15 +2484,11 @@ const Methods = {
2466
2484
  /**
2467
2485
  * 刷新列配置
2468
2486
  */
2469
- refreshColumn (initOrder: any) {
2470
- if (initOrder) {
2471
- const columnList = XEUtils.orderBy(this.collectColumn, 'renderSortNumber')
2472
- this.collectColumn = columnList
2473
- const tableFullColumn = getColumnList(columnList)
2474
- this.tableFullColumn = tableFullColumn
2475
- this.cacheColumnMap()
2487
+ refreshColumn (initSort?: boolean) {
2488
+ if (initSort) {
2489
+ this.handleUpdateColumn()
2476
2490
  }
2477
- return this.parseColumns().then(() => {
2491
+ return this.parseColumns(true).then(() => {
2478
2492
  return this.refreshScroll()
2479
2493
  }).then(() => {
2480
2494
  return this.recalculate()
@@ -2484,7 +2498,7 @@ const Methods = {
2484
2498
  * 刷新列信息
2485
2499
  * 将固定的列左边、右边分别靠边
2486
2500
  */
2487
- parseColumns () {
2501
+ parseColumns (isReset: boolean) {
2488
2502
  const $xeTable = this
2489
2503
  const props = $xeTable
2490
2504
  const internalData = $xeTable
@@ -2575,10 +2589,12 @@ const Methods = {
2575
2589
  warnLog('vxe.error.scrollErrProp', ['footer-span-method'])
2576
2590
  }
2577
2591
  }
2578
- const { visibleSize } = handleVirtualXVisible(this)
2579
- scrollXStore.startIndex = 0
2580
- scrollXStore.endIndex = visibleSize
2581
- scrollXStore.visibleSize = visibleSize
2592
+ if (isReset) {
2593
+ const { visibleSize } = handleVirtualXVisible(this)
2594
+ scrollXStore.startIndex = 0
2595
+ scrollXStore.endIndex = visibleSize
2596
+ scrollXStore.visibleSize = visibleSize
2597
+ }
2582
2598
  }
2583
2599
  // 如果列被显示/隐藏,则清除合并状态
2584
2600
  // 如果列被设置为固定,则清除合并状态
@@ -2596,12 +2612,15 @@ const Methods = {
2596
2612
  })
2597
2613
  this.visibleColumn = visibleColumn
2598
2614
  this.handleTableColumn()
2599
- return this.updateFooter().then(() => {
2600
- return this.recalculate()
2601
- }).then(() => {
2602
- this.updateCellAreas()
2603
- return this.recalculate()
2604
- })
2615
+ if (isReset) {
2616
+ return this.updateFooter().then(() => {
2617
+ return this.recalculate()
2618
+ }).then(() => {
2619
+ this.updateCellAreas()
2620
+ return this.recalculate()
2621
+ })
2622
+ }
2623
+ return this.updateFooter()
2605
2624
  },
2606
2625
  /**
2607
2626
  * 指定列宽的列进行拆分
@@ -2890,49 +2909,6 @@ const Methods = {
2890
2909
  this.checkScrolling()
2891
2910
  }
2892
2911
  },
2893
- calcCellHeight () {
2894
- const $xeTable = this
2895
- const props = $xeTable
2896
- const reactData = $xeTable
2897
- const internalData = $xeTable
2898
-
2899
- const { showOverflow } = props
2900
- const { tableData, scrollXLoad, scrollYLoad } = reactData
2901
- const { fullAllDataRowIdData } = internalData
2902
- const el = $xeTable.$el
2903
- if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
2904
- let paddingTop = 0
2905
- let paddingBottom = 0
2906
- let calcPadding = false
2907
- tableData.forEach((row: any) => {
2908
- const rowid = getRowid($xeTable, row)
2909
- const rowRest = fullAllDataRowIdData[rowid]
2910
- const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`)
2911
- if (rowRest && trList.length) {
2912
- let height = 0
2913
- for (let i = 0; i < trList.length; i++) {
2914
- const trEl = trList[i] as HTMLTableRowElement
2915
- const tdList = trEl.children
2916
- for (let j = 0; j < tdList.length; j++) {
2917
- const tdEl = tdList[j]
2918
- const cellElem = tdEl.querySelector('.vxe-cell') as HTMLDivElement
2919
- if (!calcPadding) {
2920
- paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
2921
- paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
2922
- calcPadding = true
2923
- }
2924
- let cellHeight = paddingTop + paddingBottom
2925
- if (cellElem) {
2926
- cellHeight += cellElem.offsetHeight
2927
- }
2928
- height = Math.max(height, cellHeight)
2929
- }
2930
- }
2931
- rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height
2932
- }
2933
- })
2934
- }
2935
- },
2936
2912
  updateHeight () {
2937
2913
  this.customHeight = calcTableHeight(this, 'height')
2938
2914
  this.customMinHeight = calcTableHeight(this, 'minHeight')
@@ -2969,11 +2945,8 @@ const Methods = {
2969
2945
  editStore,
2970
2946
  currentRow,
2971
2947
  mouseConfig,
2972
- keyboardConfig,
2973
- keyboardOpts,
2974
2948
  spanMethod,
2975
- mergeList,
2976
- mergeFooterList,
2949
+ expandColumn,
2977
2950
  footerSpanMethod,
2978
2951
  isAllOverflow,
2979
2952
  visibleColumn
@@ -3034,10 +3007,17 @@ const Methods = {
3034
3007
  if (isGroup) {
3035
3008
  renderColumnList = visibleColumn
3036
3009
  } else {
3037
- // 如果是使用优化模式
3038
3010
  if (fixedType) {
3039
- if (scrollXLoad || allColumnHeaderOverflow) {
3040
- renderColumnList = fixedColumn
3011
+ // 如果是使用优化模式
3012
+ if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
3013
+ // 如果不支持优化模式
3014
+ if (spanMethod || footerSpanMethod) {
3015
+ renderColumnList = visibleColumn
3016
+ } else {
3017
+ renderColumnList = fixedColumn || []
3018
+ }
3019
+ } else {
3020
+ renderColumnList = visibleColumn
3041
3021
  }
3042
3022
  }
3043
3023
  }
@@ -3129,19 +3109,20 @@ const Methods = {
3129
3109
  let tWidth = tableWidth
3130
3110
  let renderColumnList = tableColumn
3131
3111
 
3132
- // 如果是使用优化模式
3133
3112
  if (fixedType) {
3134
- // 如果存在展开行使用全量渲染
3135
- if (!this.expandColumn && (scrollXLoad || scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) {
3136
- if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
3137
- renderColumnList = fixedColumn
3138
- } else {
3113
+ // 如果是使用优化模式
3114
+ if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
3115
+ // 如果不支持优化模式
3116
+ if (expandColumn || spanMethod || footerSpanMethod) {
3139
3117
  renderColumnList = visibleColumn
3118
+ } else {
3119
+ renderColumnList = fixedColumn || []
3140
3120
  }
3141
3121
  } else {
3142
3122
  renderColumnList = visibleColumn
3143
3123
  }
3144
3124
  }
3125
+
3145
3126
  tWidth = renderColumnList.reduce((previous: any, column: any) => previous + column.renderWidth, 0)
3146
3127
 
3147
3128
  if (tableElem) {
@@ -3156,19 +3137,20 @@ const Methods = {
3156
3137
  let tWidth = tableWidth
3157
3138
  let renderColumnList = tableColumn
3158
3139
 
3159
- // 如果是使用优化模式
3160
3140
  if (fixedType) {
3161
- // 如果存在展开行使用全量渲染
3162
- if (!this.expandColumn && (scrollXLoad || allColumnFooterOverflow)) {
3163
- if (!mergeFooterList.length || !footerSpanMethod) {
3164
- renderColumnList = fixedColumn
3165
- } else {
3141
+ // 如果是使用优化模式
3142
+ if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
3143
+ // 如果不支持优化模式
3144
+ if (spanMethod || footerSpanMethod) {
3166
3145
  renderColumnList = visibleColumn
3146
+ } else {
3147
+ renderColumnList = fixedColumn || []
3167
3148
  }
3168
3149
  } else {
3169
3150
  renderColumnList = visibleColumn
3170
3151
  }
3171
3152
  }
3153
+
3172
3154
  tWidth = renderColumnList.reduce((previous: any, column: any) => previous + column.renderWidth, 0)
3173
3155
 
3174
3156
  if (isNodeElement(wrapperElem)) {
@@ -5175,7 +5157,8 @@ const Methods = {
5175
5157
  const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag
5176
5158
  let triggerDrag = false
5177
5159
  if (!(triggerInput || triggerCheckbox || triggerSort || triggerFilter)) {
5178
- if (columnOpts.drag && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
5160
+ const { column } = params
5161
+ if (columnOpts.drag && !column.fixed && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
5179
5162
  triggerDrag = true
5180
5163
  $xeTable.handleHeaderCellDragMousedownEvent(evnt, params)
5181
5164
  }
@@ -5513,7 +5496,7 @@ const Methods = {
5513
5496
  evnt.dataTransfer.setDragImage(img, 0, 0)
5514
5497
  }
5515
5498
  },
5516
- handleHeaderCellDragDragendEvent (evnt: DragEvent) {
5499
+ handleColDragSwapEvent (evnt: DragEvent, isSyncColumn: boolean | undefined, dragCol: VxeTableDefines.ColumnInfo | null | undefined, prevDragCol: VxeTableDefines.ColumnInfo | undefined, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined) {
5517
5500
  const $xeTable = this
5518
5501
  const props = $xeTable
5519
5502
  const reactData = $xeTable
@@ -5522,15 +5505,14 @@ const Methods = {
5522
5505
  const { mouseConfig } = props
5523
5506
  const columnDragOpts = $xeTable.computeColumnDragOpts
5524
5507
  const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts
5525
- const { dragCol } = reactData
5526
- const { collectColumn, prevDragCol, prevDragPos, prevDragToChild } = internalData
5508
+ const { collectColumn } = internalData
5527
5509
  const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0
5528
5510
  if (prevDragCol && dragCol) {
5529
5511
  // 判断是否有拖动
5530
5512
  if (prevDragCol !== dragCol) {
5531
- const oldColumn: VxeTableDefines.ColumnInfo = dragCol
5532
- const newColumn: VxeTableDefines.ColumnInfo = prevDragCol
5533
- Promise.resolve(
5513
+ const oldColumn = dragCol
5514
+ const newColumn = prevDragCol
5515
+ return Promise.resolve(
5534
5516
  dragEndMethod
5535
5517
  ? dragEndMethod({
5536
5518
  oldColumn,
@@ -5657,10 +5639,6 @@ const Methods = {
5657
5639
  }
5658
5640
  }
5659
5641
 
5660
- $xeTable.refreshColumn(true).then(() => {
5661
- $xeTable.updateCellAreas()
5662
- })
5663
-
5664
5642
  $xeTable.dispatchEvent('column-dragend', {
5665
5643
  oldColumn,
5666
5644
  newColumn,
@@ -5672,11 +5650,27 @@ const Methods = {
5672
5650
  }
5673
5651
  }, evnt)
5674
5652
 
5675
- $xeTable.saveCustomStore('update:sort')
5653
+ if (isSyncColumn) {
5654
+ $xeTable.handleUpdateColumn()
5655
+ $xeTable.parseColumns(false).then(() => {
5656
+ $xeTable.updateCellAreas()
5657
+ return $xeTable.saveCustomStore('update:sort')
5658
+ })
5659
+ }
5676
5660
  }).catch(() => {
5677
5661
  })
5678
5662
  }
5679
5663
  }
5664
+ return Promise.resolve()
5665
+ },
5666
+ handleHeaderCellDragDragendEvent (evnt: DragEvent) {
5667
+ const $xeTable = this
5668
+ const reactData = $xeTable
5669
+ const internalData = $xeTable
5670
+
5671
+ const { dragCol } = reactData
5672
+ const { prevDragCol, prevDragPos, prevDragToChild } = internalData
5673
+ $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild)
5680
5674
  hideDropTip($xeTable)
5681
5675
  clearColDropOrigin($xeTable)
5682
5676
  internalData.prevDragToChild = false
@@ -5684,6 +5678,9 @@ const Methods = {
5684
5678
  reactData.dragCol = null
5685
5679
  setTimeout(() => {
5686
5680
  reactData.isDragColMove = false
5681
+ $xeTable.recalculate().then(() => {
5682
+ $xeTable.loadScrollXData()
5683
+ })
5687
5684
  }, 500)
5688
5685
  },
5689
5686
  handleHeaderCellDragDragoverEvent (evnt: DragEvent) {
@@ -5704,10 +5701,10 @@ const Methods = {
5704
5701
  const column = $xeTable.getColumnById(colid)
5705
5702
  if (column) {
5706
5703
  evnt.preventDefault()
5707
- const { dragCol } = reactData
5708
- const offsetX = evnt.clientX - thEl.getBoundingClientRect().x
5704
+ const { clientX } = evnt
5705
+ const offsetX = clientX - thEl.getBoundingClientRect().x
5709
5706
  const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right'
5710
- if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
5707
+ if (column.fixed || (dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
5711
5708
  showDropTip($xeTable, evnt, null, thEl, false, dragPos)
5712
5709
  return
5713
5710
  }
@@ -5720,6 +5717,36 @@ const Methods = {
5720
5717
  targetColumn: column,
5721
5718
  dragPos
5722
5719
  }, evnt)
5720
+
5721
+ // 边缘滚动
5722
+ const el = $xeTable.$refs.refElem as HTMLElement
5723
+ if (!el) {
5724
+ return
5725
+ }
5726
+ const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
5727
+ const tableBody = $xeTable.$refs.tableBody
5728
+ const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
5729
+ const scrollTargetEl = xHandleEl || tableBodyElem
5730
+ if (scrollTargetEl) {
5731
+ const wrapperRect = el.getBoundingClientRect()
5732
+ const tableWidth = el.clientWidth
5733
+ const leftContainerElem = $xeTable.$refs.leftContainer as HTMLDivElement
5734
+ const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
5735
+ const rightContainerElem = $xeTable.$refs.rightContainer as HTMLDivElement
5736
+ const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
5737
+ const srartX = wrapperRect.x + leftContainerWidth
5738
+ const endX = wrapperRect.x + tableWidth - rightContainerWidth
5739
+ const distSize = 28
5740
+ const startDistSize = clientX - srartX
5741
+ const endDistSize = endX - clientX
5742
+ if (startDistSize > 0 && startDistSize <= distSize) {
5743
+ const scrollRatio = Math.floor(tableWidth / (startDistSize > distSize / 2 ? 240 : 120))
5744
+ scrollTargetEl.scrollLeft -= scrollRatio * (distSize - startDistSize)
5745
+ } else if (endDistSize > 0 && endDistSize <= distSize) {
5746
+ const scrollRatio = Math.floor(tableWidth / (endDistSize > distSize / 2 ? 240 : 120))
5747
+ scrollTargetEl.scrollLeft += scrollRatio * (distSize - endDistSize)
5748
+ }
5749
+ }
5723
5750
  }
5724
5751
  },
5725
5752
  handleHeaderCellDragMousedownEvent (evnt: MouseEvent, params: any) {
@@ -6977,6 +7004,16 @@ const Methods = {
6977
7004
  })
6978
7005
  this.tableColumn = tableColumn
6979
7006
  },
7007
+ handleUpdateColumn () {
7008
+ const $xeTable = this
7009
+ const internalData = $xeTable
7010
+
7011
+ const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber')
7012
+ internalData.collectColumn = columnList
7013
+ const tableFullColumn = getColumnList(columnList)
7014
+ internalData.tableFullColumn = tableFullColumn
7015
+ $xeTable.cacheColumnMap()
7016
+ },
6980
7017
  updateScrollXData () {
6981
7018
  const $xeTable = this
6982
7019
  const props = $xeTable
@@ -23,7 +23,7 @@ import keyboardMixin from '../module/keyboard/mixin'
23
23
  import validatorMixin from '../module/validator/mixin'
24
24
  import customMixin from '../module/custom/mixin'
25
25
 
26
- import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType } from 'vxe-pc-ui'
26
+ import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
27
27
 
28
28
  const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
29
29
 
@@ -778,18 +778,6 @@ export default {
778
778
  y: overflowY && scrollYLoad
779
779
  }
780
780
  },
781
- computeTableStyle () {
782
- const $xeTable = this
783
- const reactData = $xeTable
784
-
785
- const { tableData } = reactData
786
- const columnOpts = $xeTable.computeColumnOpts
787
- const stys: VxeComponentStyleType = {}
788
- if (columnOpts.drag) {
789
- stys['--vxe-ui-table-drag-column-move-delay'] = `${Math.max(0.06, Math.min(0.3, tableData.length / 800))}s`
790
- }
791
- return stys
792
- },
793
781
  tabsResizeFlag () {
794
782
  const $xeTable = this
795
783
  const $xeTabs = $xeTable.$xeTabs
@@ -844,6 +832,11 @@ export default {
844
832
  maxHeight () {
845
833
  this.$nextTick(() => this.recalculate(true))
846
834
  },
835
+ computeSize () {
836
+ this.$nextTick(() => {
837
+ this.recalculate(true).then(() => this.refreshScroll())
838
+ })
839
+ },
847
840
  syncResize (value: any) {
848
841
  if (value) {
849
842
  handleUupdateResize(this)
@@ -1255,7 +1248,6 @@ export default {
1255
1248
  const tableBorder = $xeTable.computeTableBorder
1256
1249
  const virtualScrollBars = $xeTable.computeVirtualScrollBars
1257
1250
  const isArea = mouseConfig && mouseOpts.area
1258
- const tableStyle = $xeTable.computeTableStyle
1259
1251
  const columnDragOpts = $xeTable.computeColumnDragOpts
1260
1252
  return h('div', {
1261
1253
  ref: 'refElem',
@@ -1290,7 +1282,6 @@ export default {
1290
1282
  'is--virtual-x': scrollXLoad,
1291
1283
  'is--virtual-y': scrollYLoad
1292
1284
  }],
1293
- style: tableStyle,
1294
1285
  attrs: {
1295
1286
  spellcheck: false
1296
1287
  },
@@ -49,11 +49,13 @@ VxeUI.setConfig({
49
49
  },
50
50
  rowDragConfig: {
51
51
  showIcon: true,
52
- animation: true
52
+ animation: true,
53
+ showGuidesStatus: true
53
54
  },
54
55
  columnDragConfig: {
55
56
  showIcon: true,
56
- animation: true
57
+ animation: true,
58
+ showGuidesStatus: true
57
59
  },
58
60
  checkboxConfig: {
59
61
  // trigger: 'default',
@@ -732,7 +732,7 @@
732
732
  &.col--drag-cell {
733
733
  .vxe-header--column {
734
734
  user-select: none;
735
- &:not(.is--drag-disabled) {
735
+ &.is--drag-active {
736
736
  cursor: grab;
737
737
  &:active {
738
738
  cursor: grabbing;
@@ -1377,7 +1377,6 @@
1377
1377
  .vxe-header--col-list-move {
1378
1378
  transition-property: transform;
1379
1379
  transition-duration: 0.35s;
1380
- transition-delay: var(--vxe-ui-table-drag-column-move-delay, 0.3s);
1381
1380
  }
1382
1381
 
1383
1382
  .vxe-table--drag-col-line,
@@ -1459,7 +1458,6 @@
1459
1458
  .vxe-body--row-list-move {
1460
1459
  transition-property: transform;
1461
1460
  transition-duration: 0.35s;
1462
- transition-delay: 0.05s;
1463
1461
  }
1464
1462
  .vxe-table--drag-sort-tip {
1465
1463
  display: none;