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.
- package/es/index.css +1 -1
- package/es/index.min.css +1 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/render/index.js +47 -12
- package/es/table/src/body.js +81 -35
- package/es/table/src/footer.js +54 -18
- package/es/table/src/header.js +58 -10
- package/es/table/src/methods.js +159 -118
- package/es/table/src/table.js +5 -13
- package/es/table/style.css +3 -5
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +5 -3
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +3 -5
- package/es/vxe-table/style.min.css +1 -1
- package/lib/index.css +1 -1
- package/lib/index.min.css +1 -1
- package/lib/index.umd.js +464 -272
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/render/index.js +47 -12
- package/lib/table/render/index.min.js +1 -1
- package/lib/table/src/body.js +101 -56
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/footer.js +67 -30
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/header.js +71 -18
- package/lib/table/src/header.min.js +1 -1
- package/lib/table/src/methods.js +167 -137
- package/lib/table/src/methods.min.js +1 -1
- package/lib/table/src/table.js +5 -15
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/style/style.css +3 -5
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +5 -3
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-table/style/style.css +3 -5
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +2 -2
- package/packages/table/render/index.ts +48 -12
- package/packages/table/src/body.ts +84 -35
- package/packages/table/src/footer.ts +58 -18
- package/packages/table/src/header.ts +62 -11
- package/packages/table/src/methods.ts +163 -126
- package/packages/table/src/table.ts +6 -15
- package/packages/ui/index.ts +4 -2
- package/styles/components/table.scss +1 -3
- /package/es/{iconfont.1735003904481.ttf → iconfont.1735106128767.ttf} +0 -0
- /package/es/{iconfont.1735003904481.woff → iconfont.1735106128767.woff} +0 -0
- /package/es/{iconfont.1735003904481.woff2 → iconfont.1735106128767.woff2} +0 -0
- /package/lib/{iconfont.1735003904481.ttf → iconfont.1735106128767.ttf} +0 -0
- /package/lib/{iconfont.1735003904481.woff → iconfont.1735106128767.woff} +0 -0
- /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.$
|
|
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
|
|
312
|
-
if (rowRest &&
|
|
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 <
|
|
315
|
-
const
|
|
316
|
-
const
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
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 = `${
|
|
460
|
-
rdLineEl.style.height = `${
|
|
461
|
-
rdLineEl.style.width = `${
|
|
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 = `${
|
|
477
|
-
cdLineEl.style.width = `${
|
|
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 = `${
|
|
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 (
|
|
2470
|
-
if (
|
|
2471
|
-
|
|
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
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
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
|
-
|
|
2600
|
-
return this.
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
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
|
-
|
|
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
|
-
|
|
3040
|
-
|
|
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 (
|
|
3136
|
-
|
|
3137
|
-
|
|
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 (
|
|
3163
|
-
|
|
3164
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 {
|
|
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
|
|
5532
|
-
const newColumn
|
|
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
|
-
|
|
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 {
|
|
5708
|
-
const offsetX =
|
|
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
|
|
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
|
},
|
package/packages/ui/index.ts
CHANGED
|
@@ -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
|
-
|
|
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;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|