vxe-table 3.11.5 → 3.11.6-beta.1
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 -0
- package/es/index.min.css +1 -0
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/module/filter/mixin.js +23 -2
- package/es/table/module/filter/panel.js +3 -6
- package/es/table/src/body.js +55 -30
- package/es/table/src/footer.js +30 -22
- package/es/table/src/methods.js +253 -110
- package/es/table/src/table.js +11 -3
- package/es/table/style.css +48 -3
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +2 -2
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +48 -3
- package/es/vxe-table/style.min.css +1 -1
- package/lib/index.css +1 -0
- package/lib/index.min.css +1 -0
- package/lib/index.umd.js +436 -197
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/module/filter/mixin.js +25 -2
- package/lib/table/module/filter/mixin.min.js +1 -1
- package/lib/table/module/filter/panel.js +3 -7
- package/lib/table/module/filter/panel.min.js +1 -1
- package/lib/table/src/body.js +65 -32
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/footer.js +32 -23
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/methods.js +293 -128
- package/lib/table/src/methods.min.js +1 -1
- package/lib/table/src/table.js +16 -2
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/style/style.css +48 -3
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +2 -2
- 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 +48 -3
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +2 -2
- package/packages/table/module/filter/mixin.ts +26 -2
- package/packages/table/module/filter/panel.ts +3 -6
- package/packages/table/src/body.ts +66 -27
- package/packages/table/src/footer.ts +33 -21
- package/packages/table/src/methods.ts +266 -113
- package/packages/ui/index.ts +1 -1
- package/packages/ui/src/dom.ts +2 -2
- package/styles/components/table.scss +24 -3
- /package/es/{iconfont.1732091003142.ttf → iconfont.1732506597105.ttf} +0 -0
- /package/es/{iconfont.1732091003142.woff → iconfont.1732506597105.woff} +0 -0
- /package/es/{iconfont.1732091003142.woff2 → iconfont.1732506597105.woff2} +0 -0
- /package/lib/{iconfont.1732091003142.ttf → iconfont.1732506597105.ttf} +0 -0
- /package/lib/{iconfont.1732091003142.woff → iconfont.1732506597105.woff} +0 -0
- /package/lib/{iconfont.1732091003142.woff2 → iconfont.1732506597105.woff2} +0 -0
|
@@ -11,8 +11,8 @@ import type { VxeTableDefines, VxeTableEmits, ValueOf } from '../../../types'
|
|
|
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
|
|
14
|
+
// const isWebkit = browse['-webkit'] && !browse.edge
|
|
15
|
+
// const debounceScrollYDuration = browse.msie ? 80 : 20
|
|
16
16
|
|
|
17
17
|
const customStorageKey = 'VXE_CUSTOM_STORE'
|
|
18
18
|
|
|
@@ -109,25 +109,29 @@ function handleVirtualXVisible (_vm: any) {
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
const computeRowHeight = ($xeTable: any) => {
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
const
|
|
112
|
+
const props = $xeTable
|
|
113
|
+
|
|
114
|
+
const { showOverflow } = props
|
|
115
|
+
const tableHeader = $xeTable.$refs.tableHeader
|
|
116
|
+
const tableBody = $xeTable.$refs.tableBody
|
|
115
117
|
const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
|
|
116
|
-
const vSize = computeSize
|
|
118
|
+
const vSize = $xeTable.computeSize
|
|
117
119
|
const rowHeightMaps = $xeTable.rowHeightMaps
|
|
118
120
|
let rowHeight = 0
|
|
119
|
-
if (
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
firstTrElem
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
rowHeight
|
|
121
|
+
if (showOverflow) {
|
|
122
|
+
if (tableBodyElem) {
|
|
123
|
+
const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
|
|
124
|
+
let firstTrElem
|
|
125
|
+
firstTrElem = tableBodyElem.querySelector('tr')
|
|
126
|
+
if (!firstTrElem && tableHeaderElem) {
|
|
127
|
+
firstTrElem = tableHeaderElem.querySelector('tr')
|
|
128
|
+
}
|
|
129
|
+
if (firstTrElem) {
|
|
130
|
+
rowHeight = firstTrElem.clientHeight
|
|
131
|
+
}
|
|
132
|
+
if (!rowHeight) {
|
|
133
|
+
rowHeight = rowHeightMaps[vSize || 'default']
|
|
134
|
+
}
|
|
131
135
|
}
|
|
132
136
|
}
|
|
133
137
|
return rowHeight
|
|
@@ -289,20 +293,43 @@ function calcTableHeight (_vm: any, key: 'height' | 'minHeight' | 'maxHeight') {
|
|
|
289
293
|
}
|
|
290
294
|
|
|
291
295
|
const calcCellHeight = ($xeTable: any) => {
|
|
292
|
-
const
|
|
296
|
+
const props = $xeTable
|
|
297
|
+
const reactData = $xeTable
|
|
298
|
+
const internalData = $xeTable
|
|
299
|
+
|
|
300
|
+
const { showOverflow } = props
|
|
301
|
+
const { tableData, scrollXLoad, scrollYLoad } = reactData
|
|
302
|
+
const { fullAllDataRowIdData } = internalData
|
|
293
303
|
const el = $xeTable.$el
|
|
294
|
-
if (scrollYLoad && el) {
|
|
304
|
+
if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
|
|
305
|
+
let paddingTop = 0
|
|
306
|
+
let paddingBottom = 0
|
|
307
|
+
let calcPadding = false
|
|
295
308
|
tableData.forEach((row: any) => {
|
|
296
309
|
const rowid = getRowid($xeTable, row)
|
|
297
|
-
const
|
|
310
|
+
const rowRest = fullAllDataRowIdData[rowid]
|
|
298
311
|
const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`)
|
|
299
|
-
if (
|
|
312
|
+
if (rowRest && trList.length) {
|
|
300
313
|
let height = 0
|
|
301
314
|
for (let i = 0; i < trList.length; i++) {
|
|
302
315
|
const trEl = trList[i] as HTMLTableRowElement
|
|
303
|
-
|
|
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)
|
|
330
|
+
}
|
|
304
331
|
}
|
|
305
|
-
|
|
332
|
+
rowRest.height = height
|
|
306
333
|
}
|
|
307
334
|
})
|
|
308
335
|
}
|
|
@@ -476,6 +503,50 @@ const handleScrollToRowColumn = ($xeTable: any, fieldOrColumn: string | VxeTable
|
|
|
476
503
|
return $xeTable.$nextTick()
|
|
477
504
|
}
|
|
478
505
|
|
|
506
|
+
function handleRecalculateLayout ($xeTable: any, reFull: boolean) {
|
|
507
|
+
const el = $xeTable.$refs.refElem
|
|
508
|
+
if (!el || !el.clientWidth) {
|
|
509
|
+
return $xeTable.$nextTick()
|
|
510
|
+
}
|
|
511
|
+
$xeTable.calcCellWidth()
|
|
512
|
+
$xeTable.autoCellWidth()
|
|
513
|
+
if (reFull === true) {
|
|
514
|
+
// 初始化时需要在列计算之后再执行优化运算,达到最优显示效果
|
|
515
|
+
return $xeTable.computeScrollLoad().then(() => {
|
|
516
|
+
calcCellHeight($xeTable)
|
|
517
|
+
$xeTable.calcCellWidth()
|
|
518
|
+
$xeTable.autoCellWidth()
|
|
519
|
+
return $xeTable.computeScrollLoad()
|
|
520
|
+
})
|
|
521
|
+
}
|
|
522
|
+
return $xeTable.computeScrollLoad()
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
function checkLastSyncScroll ($xeTable: any, isRollX: boolean, isRollY: boolean) {
|
|
526
|
+
const reactData = $xeTable
|
|
527
|
+
const internalData = $xeTable
|
|
528
|
+
|
|
529
|
+
const { scrollXLoad, scrollYLoad } = reactData
|
|
530
|
+
const { lcsTimeout } = internalData
|
|
531
|
+
if (lcsTimeout) {
|
|
532
|
+
clearTimeout(lcsTimeout)
|
|
533
|
+
}
|
|
534
|
+
internalData.lcsTimeout = setTimeout(() => {
|
|
535
|
+
internalData.lcsTimeout = undefined
|
|
536
|
+
internalData.inVirtualScroll = false
|
|
537
|
+
internalData.inBodyScroll = false
|
|
538
|
+
internalData.bodyScrollType = ''
|
|
539
|
+
internalData.inFooterScroll = false
|
|
540
|
+
if (isRollX && scrollXLoad) {
|
|
541
|
+
$xeTable.updateScrollXData()
|
|
542
|
+
}
|
|
543
|
+
if (isRollY && scrollYLoad) {
|
|
544
|
+
$xeTable.updateScrollYData()
|
|
545
|
+
}
|
|
546
|
+
$xeTable.updateCellAreas()
|
|
547
|
+
}, 200)
|
|
548
|
+
}
|
|
549
|
+
|
|
479
550
|
const Methods = {
|
|
480
551
|
callSlot (slotFunc: any, params: any, h: any, vNodes: any) {
|
|
481
552
|
if (slotFunc) {
|
|
@@ -2435,22 +2506,21 @@ const Methods = {
|
|
|
2435
2506
|
* 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
|
|
2436
2507
|
*/
|
|
2437
2508
|
recalculate (reFull?: boolean) {
|
|
2438
|
-
const
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
}
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
// 初始化时需要在列计算之后再执行优化运算,达到最优显示效果
|
|
2447
|
-
return this.computeScrollLoad().then(() => {
|
|
2448
|
-
calcCellHeight(this)
|
|
2449
|
-
this.autoCellWidth()
|
|
2450
|
-
return this.computeScrollLoad()
|
|
2451
|
-
})
|
|
2509
|
+
const $xeTable = this
|
|
2510
|
+
const internalData = $xeTable
|
|
2511
|
+
|
|
2512
|
+
const { rceTimeout } = internalData
|
|
2513
|
+
if (rceTimeout) {
|
|
2514
|
+
clearTimeout(rceTimeout)
|
|
2515
|
+
} else {
|
|
2516
|
+
handleRecalculateLayout($xeTable, !!reFull)
|
|
2452
2517
|
}
|
|
2453
|
-
return
|
|
2518
|
+
return new Promise(resolve => {
|
|
2519
|
+
internalData.rceTimeout = setTimeout(() => {
|
|
2520
|
+
internalData.rceTimeout = undefined
|
|
2521
|
+
resolve(handleRecalculateLayout($xeTable, !!reFull))
|
|
2522
|
+
}, 20)
|
|
2523
|
+
})
|
|
2454
2524
|
},
|
|
2455
2525
|
calcCellWidth () {
|
|
2456
2526
|
const $xeTable = this
|
|
@@ -2643,13 +2713,18 @@ const Methods = {
|
|
|
2643
2713
|
},
|
|
2644
2714
|
calcCellHeight () {
|
|
2645
2715
|
const $xeTable = this
|
|
2716
|
+
const props = $xeTable
|
|
2646
2717
|
const reactData = $xeTable
|
|
2647
2718
|
const internalData = $xeTable
|
|
2648
2719
|
|
|
2649
|
-
const {
|
|
2720
|
+
const { showOverflow } = props
|
|
2721
|
+
const { tableData, scrollXLoad, scrollYLoad } = reactData
|
|
2650
2722
|
const { fullAllDataRowIdData } = internalData
|
|
2651
2723
|
const el = $xeTable.$el
|
|
2652
|
-
if (scrollYLoad && el) {
|
|
2724
|
+
if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
|
|
2725
|
+
let paddingTop = 0
|
|
2726
|
+
let paddingBottom = 0
|
|
2727
|
+
let calcPadding = false
|
|
2653
2728
|
tableData.forEach((row: any) => {
|
|
2654
2729
|
const rowid = getRowid($xeTable, row)
|
|
2655
2730
|
const rowRest = fullAllDataRowIdData[rowid]
|
|
@@ -2658,9 +2733,23 @@ const Methods = {
|
|
|
2658
2733
|
let height = 0
|
|
2659
2734
|
for (let i = 0; i < trList.length; i++) {
|
|
2660
2735
|
const trEl = trList[i] as HTMLTableRowElement
|
|
2661
|
-
|
|
2736
|
+
const tdList = trEl.children
|
|
2737
|
+
for (let j = 0; j < tdList.length; j++) {
|
|
2738
|
+
const tdEl = tdList[j]
|
|
2739
|
+
const cellElem = tdEl.querySelector('.vxe-cell') as HTMLDivElement
|
|
2740
|
+
if (!calcPadding) {
|
|
2741
|
+
paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
|
|
2742
|
+
paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
|
|
2743
|
+
calcPadding = true
|
|
2744
|
+
}
|
|
2745
|
+
let cellHeight = paddingTop + paddingBottom
|
|
2746
|
+
if (cellElem) {
|
|
2747
|
+
cellHeight += cellElem.offsetHeight
|
|
2748
|
+
}
|
|
2749
|
+
height = Math.max(height, cellHeight)
|
|
2750
|
+
}
|
|
2662
2751
|
}
|
|
2663
|
-
rowRest.height = height
|
|
2752
|
+
rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height
|
|
2664
2753
|
}
|
|
2665
2754
|
})
|
|
2666
2755
|
}
|
|
@@ -5890,16 +5979,15 @@ const Methods = {
|
|
|
5890
5979
|
scrollLeft: bodyElem.scrollLeft
|
|
5891
5980
|
}
|
|
5892
5981
|
},
|
|
5893
|
-
/**
|
|
5894
|
-
* 横向 X 可视渲染事件处理
|
|
5895
|
-
*/
|
|
5896
|
-
triggerScrollXEvent () {
|
|
5897
|
-
this.loadScrollXData()
|
|
5898
|
-
},
|
|
5899
5982
|
loadScrollXData () {
|
|
5900
|
-
const
|
|
5983
|
+
const $xeTable = this
|
|
5984
|
+
const reactData = $xeTable
|
|
5985
|
+
const internalData = $xeTable
|
|
5986
|
+
|
|
5987
|
+
const { mergeList, mergeFooterList } = reactData
|
|
5988
|
+
const { scrollXStore } = internalData
|
|
5901
5989
|
const { startIndex, endIndex, offsetSize } = scrollXStore
|
|
5902
|
-
const { toVisibleIndex, visibleSize } = handleVirtualXVisible(
|
|
5990
|
+
const { toVisibleIndex, visibleSize } = handleVirtualXVisible($xeTable)
|
|
5903
5991
|
const offsetItem = {
|
|
5904
5992
|
startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
|
|
5905
5993
|
endIndex: toVisibleIndex + visibleSize + offsetSize
|
|
@@ -5910,10 +5998,10 @@ const Methods = {
|
|
|
5910
5998
|
if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
|
|
5911
5999
|
scrollXStore.startIndex = offsetStartIndex
|
|
5912
6000
|
scrollXStore.endIndex = offsetEndIndex
|
|
5913
|
-
|
|
6001
|
+
$xeTable.updateScrollXData()
|
|
5914
6002
|
}
|
|
5915
6003
|
}
|
|
5916
|
-
|
|
6004
|
+
$xeTable.closeTooltip()
|
|
5917
6005
|
},
|
|
5918
6006
|
handleScrollEvent (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number, params: any) {
|
|
5919
6007
|
const $xeTable = this
|
|
@@ -5960,7 +6048,6 @@ const Methods = {
|
|
|
5960
6048
|
}
|
|
5961
6049
|
$xeTable.checkScrolling()
|
|
5962
6050
|
internalData.lastScrollLeft = scrollLeft
|
|
5963
|
-
reactData.lastScrollTime = Date.now()
|
|
5964
6051
|
} else {
|
|
5965
6052
|
const yThreshold = $xeTable.computeScrollYThreshold
|
|
5966
6053
|
isTop = scrollTop <= 0
|
|
@@ -5979,8 +6066,8 @@ const Methods = {
|
|
|
5979
6066
|
}
|
|
5980
6067
|
}
|
|
5981
6068
|
internalData.lastScrollTop = scrollTop
|
|
5982
|
-
reactData.lastScrollTime = Date.now()
|
|
5983
6069
|
}
|
|
6070
|
+
reactData.lastScrollTime = Date.now()
|
|
5984
6071
|
const evntParams = {
|
|
5985
6072
|
scrollTop,
|
|
5986
6073
|
scrollLeft,
|
|
@@ -5997,6 +6084,7 @@ const Methods = {
|
|
|
5997
6084
|
direction,
|
|
5998
6085
|
...params
|
|
5999
6086
|
}
|
|
6087
|
+
checkLastSyncScroll($xeTable, isRollX, isRollY)
|
|
6000
6088
|
if (rowOpts.isHover || highlightHoverRow) {
|
|
6001
6089
|
$xeTable.clearHoverRow()
|
|
6002
6090
|
}
|
|
@@ -6012,74 +6100,129 @@ const Methods = {
|
|
|
6012
6100
|
}
|
|
6013
6101
|
$xeTable.dispatchEvent('scroll', evntParams, evnt)
|
|
6014
6102
|
},
|
|
6103
|
+
lazyScrollXData () {
|
|
6104
|
+
const $xeTable = this
|
|
6105
|
+
const internalData = $xeTable
|
|
6106
|
+
|
|
6107
|
+
const { lxTimeout, lxRunTime, scrollXStore } = internalData
|
|
6108
|
+
const { visibleSize } = scrollXStore
|
|
6109
|
+
const fpsTime = Math.min(80, Math.floor(visibleSize * 3))
|
|
6110
|
+
if (lxTimeout) {
|
|
6111
|
+
clearTimeout(lxTimeout)
|
|
6112
|
+
}
|
|
6113
|
+
if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
|
|
6114
|
+
internalData.lxRunTime = Date.now()
|
|
6115
|
+
$xeTable.loadScrollXData()
|
|
6116
|
+
}
|
|
6117
|
+
internalData.lxTimeout = setTimeout(() => {
|
|
6118
|
+
internalData.lxRunTime = undefined
|
|
6119
|
+
internalData.lxRunTime = undefined
|
|
6120
|
+
$xeTable.loadScrollXData()
|
|
6121
|
+
}, fpsTime)
|
|
6122
|
+
},
|
|
6123
|
+
lazyScrollYData () {
|
|
6124
|
+
const $xeTable = this
|
|
6125
|
+
const internalData = $xeTable
|
|
6126
|
+
|
|
6127
|
+
const { lyTimeout, lyRunTime, scrollYStore } = internalData
|
|
6128
|
+
const { visibleSize } = scrollYStore
|
|
6129
|
+
const fpsTime = Math.min(80, Math.floor(visibleSize * 2))
|
|
6130
|
+
if (lyTimeout) {
|
|
6131
|
+
clearTimeout(lyTimeout)
|
|
6132
|
+
}
|
|
6133
|
+
if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
|
|
6134
|
+
internalData.lyRunTime = Date.now()
|
|
6135
|
+
$xeTable.loadScrollYData()
|
|
6136
|
+
}
|
|
6137
|
+
internalData.lyTimeout = setTimeout(() => {
|
|
6138
|
+
internalData.lyTimeout = undefined
|
|
6139
|
+
internalData.lyRunTime = undefined
|
|
6140
|
+
$xeTable.loadScrollYData()
|
|
6141
|
+
}, fpsTime)
|
|
6142
|
+
},
|
|
6143
|
+
/**
|
|
6144
|
+
* 横向 X 可视渲染事件处理
|
|
6145
|
+
*/
|
|
6146
|
+
triggerScrollXEvent () {
|
|
6147
|
+
const $xeTable = this
|
|
6148
|
+
|
|
6149
|
+
const sXOpts = $xeTable.computeSXOpts
|
|
6150
|
+
if (sXOpts.immediate) {
|
|
6151
|
+
$xeTable.loadScrollXData()
|
|
6152
|
+
} else {
|
|
6153
|
+
$xeTable.lazyScrollXData()
|
|
6154
|
+
}
|
|
6155
|
+
},
|
|
6015
6156
|
/**
|
|
6016
6157
|
* 纵向 Y 可视渲染事件处理
|
|
6017
6158
|
*/
|
|
6018
6159
|
triggerScrollYEvent () {
|
|
6019
|
-
const
|
|
6020
|
-
|
|
6021
|
-
|
|
6022
|
-
if (
|
|
6023
|
-
|
|
6160
|
+
const $xeTable = this
|
|
6161
|
+
|
|
6162
|
+
const sYOpts = $xeTable.computeSYOpts
|
|
6163
|
+
if (sYOpts.immediate) {
|
|
6164
|
+
$xeTable.loadScrollYData()
|
|
6024
6165
|
} else {
|
|
6025
|
-
|
|
6166
|
+
$xeTable.lazyScrollYData()
|
|
6026
6167
|
}
|
|
6027
|
-
this.debounceScrollYCalculate()
|
|
6028
6168
|
},
|
|
6029
|
-
|
|
6030
|
-
this.loadScrollYData()
|
|
6031
|
-
}, debounceScrollYDuration, { leading: false, trailing: true }),
|
|
6032
|
-
handleSyncScrollX (scrollLeft: number) {
|
|
6169
|
+
scrollXEvent (evnt: Event) {
|
|
6033
6170
|
const $xeTable = this
|
|
6171
|
+
const internalData = $xeTable
|
|
6034
6172
|
|
|
6173
|
+
const { inFooterScroll, inBodyScroll } = internalData
|
|
6174
|
+
if (inFooterScroll) {
|
|
6175
|
+
return
|
|
6176
|
+
}
|
|
6177
|
+
if (inBodyScroll) {
|
|
6178
|
+
return
|
|
6179
|
+
}
|
|
6035
6180
|
const tableHeader = $xeTable.$refs.tableHeader
|
|
6036
6181
|
const tableBody = $xeTable.$refs.tableBody
|
|
6037
6182
|
const tableFooter = $xeTable.$refs.tableFooter
|
|
6038
6183
|
const bodyElem = tableBody.$el as HTMLDivElement
|
|
6039
6184
|
const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
|
|
6040
6185
|
const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
|
|
6041
|
-
setScrollLeft(bodyElem, scrollLeft)
|
|
6042
|
-
setScrollLeft(headerElem, scrollLeft)
|
|
6043
|
-
setScrollLeft(footerElem, scrollLeft)
|
|
6044
|
-
},
|
|
6045
|
-
scrollXEvent (evnt: Event) {
|
|
6046
|
-
const $xeTable = this
|
|
6047
|
-
|
|
6048
6186
|
const wrapperEl = evnt.currentTarget as HTMLDivElement
|
|
6049
6187
|
const { scrollTop, scrollLeft } = wrapperEl
|
|
6050
6188
|
const isRollX = true
|
|
6051
6189
|
const isRollY = false
|
|
6052
|
-
|
|
6190
|
+
internalData.inVirtualScroll = true
|
|
6191
|
+
setScrollLeft(bodyElem, scrollLeft)
|
|
6192
|
+
setScrollLeft(headerElem, scrollLeft)
|
|
6193
|
+
setScrollLeft(footerElem, scrollLeft)
|
|
6053
6194
|
$xeTable.triggerScrollXEvent(evnt)
|
|
6054
6195
|
$xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
|
|
6055
6196
|
type: 'table',
|
|
6056
6197
|
fixed: ''
|
|
6057
6198
|
})
|
|
6058
6199
|
},
|
|
6059
|
-
|
|
6060
|
-
this.updateScrollYSpace()
|
|
6061
|
-
}, 1000, { leading: false, trailing: true }),
|
|
6062
|
-
handleSyncScrollY (scrollTop: number) {
|
|
6200
|
+
scrollYEvent (evnt: Event) {
|
|
6063
6201
|
const $xeTable = this
|
|
6202
|
+
const internalData = $xeTable
|
|
6064
6203
|
|
|
6204
|
+
const { inFooterScroll, inBodyScroll } = internalData
|
|
6205
|
+
if (inFooterScroll) {
|
|
6206
|
+
return
|
|
6207
|
+
}
|
|
6208
|
+
if (inBodyScroll) {
|
|
6209
|
+
return
|
|
6210
|
+
}
|
|
6065
6211
|
const tableBody = $xeTable.$refs.tableBody
|
|
6066
6212
|
const leftBody = $xeTable.$refs.leftBody
|
|
6067
6213
|
const rightBody = $xeTable.$refs.rightBody
|
|
6068
6214
|
const bodyElem = tableBody.$el as HTMLDivElement
|
|
6069
6215
|
const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
|
|
6070
6216
|
const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null
|
|
6071
|
-
setScrollTop(bodyElem, scrollTop)
|
|
6072
|
-
setScrollTop(leftElem, scrollTop)
|
|
6073
|
-
setScrollTop(rightElem, scrollTop)
|
|
6074
|
-
},
|
|
6075
|
-
scrollYEvent (evnt: Event) {
|
|
6076
|
-
const $xeTable = this
|
|
6077
|
-
|
|
6078
6217
|
const wrapperEl = evnt.currentTarget as HTMLDivElement
|
|
6079
6218
|
const { scrollTop, scrollLeft } = wrapperEl
|
|
6080
6219
|
const isRollX = false
|
|
6081
6220
|
const isRollY = true
|
|
6082
|
-
|
|
6221
|
+
|
|
6222
|
+
internalData.inVirtualScroll = true
|
|
6223
|
+
setScrollTop(bodyElem, scrollTop)
|
|
6224
|
+
setScrollTop(leftElem, scrollTop)
|
|
6225
|
+
setScrollTop(rightElem, scrollTop)
|
|
6083
6226
|
$xeTable.triggerScrollYEvent(evnt)
|
|
6084
6227
|
$xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
|
|
6085
6228
|
type: 'table',
|
|
@@ -6090,12 +6233,20 @@ const Methods = {
|
|
|
6090
6233
|
* 纵向 Y 可视渲染处理
|
|
6091
6234
|
*/
|
|
6092
6235
|
loadScrollYData () {
|
|
6093
|
-
const
|
|
6236
|
+
const $xeTable = this
|
|
6237
|
+
const props = $xeTable
|
|
6238
|
+
const reactData = $xeTable
|
|
6239
|
+
const internalData = $xeTable
|
|
6240
|
+
|
|
6241
|
+
const { showOverflow } = props
|
|
6242
|
+
const { mergeList } = reactData
|
|
6243
|
+
const { tableHeight, scrollYStore } = internalData
|
|
6094
6244
|
const { startIndex, endIndex, offsetSize } = scrollYStore
|
|
6095
|
-
const
|
|
6245
|
+
const offsetYSize = showOverflow ? offsetSize : offsetSize + Math.min(8, Math.ceil(tableHeight / 200))
|
|
6246
|
+
const { toVisibleIndex, visibleSize } = handleVirtualYVisible($xeTable)
|
|
6096
6247
|
const offsetItem = {
|
|
6097
|
-
startIndex: Math.max(0, toVisibleIndex - 1 -
|
|
6098
|
-
endIndex: toVisibleIndex + visibleSize +
|
|
6248
|
+
startIndex: Math.max(0, toVisibleIndex - 1 - offsetYSize),
|
|
6249
|
+
endIndex: toVisibleIndex + visibleSize + offsetYSize
|
|
6099
6250
|
}
|
|
6100
6251
|
calculateMergerOffsetIndex(mergeList, offsetItem, 'row')
|
|
6101
6252
|
const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem
|
|
@@ -6103,49 +6254,43 @@ const Methods = {
|
|
|
6103
6254
|
if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
|
|
6104
6255
|
scrollYStore.startIndex = offsetStartIndex
|
|
6105
6256
|
scrollYStore.endIndex = offsetEndIndex
|
|
6106
|
-
|
|
6257
|
+
$xeTable.updateScrollYData()
|
|
6107
6258
|
}
|
|
6108
6259
|
}
|
|
6109
6260
|
},
|
|
6110
6261
|
// 计算可视渲染相关数据
|
|
6111
6262
|
computeScrollLoad () {
|
|
6112
6263
|
const $xeTable = this
|
|
6113
|
-
const props = $xeTable
|
|
6114
6264
|
|
|
6115
6265
|
return this.$nextTick().then(() => {
|
|
6116
|
-
const { showOverflow } = props
|
|
6117
6266
|
const { sYOpts, sXOpts, scrollXLoad, scrollYLoad, scrollXStore, scrollYStore } = this
|
|
6118
6267
|
// 计算 X 逻辑
|
|
6119
6268
|
if (scrollXLoad) {
|
|
6120
|
-
const { visibleSize: visibleXSize } = handleVirtualXVisible(
|
|
6121
|
-
|
|
6122
|
-
const bufferSize = showOverflow ? 0 : 2
|
|
6123
|
-
const offsetXSize = Math.max(bufferSize, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : browse.msie ? 10 : (browse.edge ? 5 : 0))
|
|
6269
|
+
const { visibleSize: visibleXSize } = handleVirtualXVisible($xeTable)
|
|
6270
|
+
const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : (browse.edge ? 5 : 0))
|
|
6124
6271
|
scrollXStore.offsetSize = offsetXSize
|
|
6125
6272
|
scrollXStore.visibleSize = visibleXSize
|
|
6126
6273
|
scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex)
|
|
6127
|
-
|
|
6274
|
+
$xeTable.updateScrollXData()
|
|
6128
6275
|
} else {
|
|
6129
|
-
|
|
6276
|
+
$xeTable.updateScrollXSpace()
|
|
6130
6277
|
}
|
|
6131
6278
|
calcCellHeight(this)
|
|
6132
6279
|
// 计算 Y 逻辑
|
|
6133
6280
|
const rowHeight = computeRowHeight(this)
|
|
6134
6281
|
scrollYStore.rowHeight = rowHeight
|
|
6135
6282
|
this.rowHeight = rowHeight
|
|
6136
|
-
const { visibleSize: visibleYSize } = handleVirtualYVisible(
|
|
6283
|
+
const { visibleSize: visibleYSize } = handleVirtualYVisible($xeTable)
|
|
6137
6284
|
if (scrollYLoad) {
|
|
6138
|
-
|
|
6139
|
-
const bufferSize = showOverflow ? 0 : 2
|
|
6140
|
-
const offsetYSize = Math.max(bufferSize, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0))
|
|
6285
|
+
const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0))
|
|
6141
6286
|
scrollYStore.offsetSize = offsetYSize
|
|
6142
6287
|
scrollYStore.visibleSize = visibleYSize
|
|
6143
6288
|
scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex)
|
|
6144
|
-
|
|
6289
|
+
$xeTable.updateScrollYData()
|
|
6145
6290
|
} else {
|
|
6146
|
-
|
|
6291
|
+
$xeTable.updateScrollYSpace()
|
|
6147
6292
|
}
|
|
6148
|
-
|
|
6293
|
+
$xeTable.$nextTick(this.updateStyle)
|
|
6149
6294
|
})
|
|
6150
6295
|
},
|
|
6151
6296
|
handleTableColumn () {
|
|
@@ -6161,10 +6306,18 @@ const Methods = {
|
|
|
6161
6306
|
this.tableColumn = tableColumn
|
|
6162
6307
|
},
|
|
6163
6308
|
updateScrollXData () {
|
|
6309
|
+
const $xeTable = this
|
|
6310
|
+
const props = $xeTable
|
|
6311
|
+
|
|
6312
|
+
const { showOverflow } = props
|
|
6164
6313
|
// this.tableColumn = []
|
|
6165
|
-
return
|
|
6166
|
-
|
|
6167
|
-
|
|
6314
|
+
return $xeTable.$nextTick().then(() => {
|
|
6315
|
+
$xeTable.handleTableColumn()
|
|
6316
|
+
calcCellHeight($xeTable)
|
|
6317
|
+
$xeTable.updateScrollXSpace()
|
|
6318
|
+
if (!showOverflow) {
|
|
6319
|
+
$xeTable.updateScrollYSpace()
|
|
6320
|
+
}
|
|
6168
6321
|
})
|
|
6169
6322
|
},
|
|
6170
6323
|
// 更新横向 X 可视渲染上下剩余空间大小
|
|
@@ -6213,10 +6366,10 @@ const Methods = {
|
|
|
6213
6366
|
const $xeTable = this
|
|
6214
6367
|
|
|
6215
6368
|
// this.tableData = []
|
|
6216
|
-
return
|
|
6217
|
-
|
|
6369
|
+
return $xeTable.$nextTick().then(() => {
|
|
6370
|
+
$xeTable.handleTableData()
|
|
6218
6371
|
calcCellHeight($xeTable)
|
|
6219
|
-
|
|
6372
|
+
$xeTable.updateScrollYSpace()
|
|
6220
6373
|
})
|
|
6221
6374
|
},
|
|
6222
6375
|
// 更新纵向 Y 可视渲染上下剩余空间大小
|
|
@@ -6617,7 +6770,7 @@ const Methods = {
|
|
|
6617
6770
|
} as any
|
|
6618
6771
|
|
|
6619
6772
|
// Module methods
|
|
6620
|
-
const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',')
|
|
6773
|
+
const funcs = 'setFilter,openFilter,clearFilter,saveFilterPanel,resetFilterPanel,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',')
|
|
6621
6774
|
|
|
6622
6775
|
funcs.forEach(name => {
|
|
6623
6776
|
Methods[name] = function (...args: any[]) {
|
package/packages/ui/index.ts
CHANGED
package/packages/ui/src/dom.ts
CHANGED
|
@@ -81,13 +81,13 @@ export function getPaddingTopBottomSize (elem: HTMLElement) {
|
|
|
81
81
|
return 0
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
export function setScrollTop (elem: HTMLElement | null, scrollTop: number) {
|
|
84
|
+
export function setScrollTop (elem: HTMLElement | null | undefined, scrollTop: number) {
|
|
85
85
|
if (elem) {
|
|
86
86
|
elem.scrollTop = scrollTop
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
export function setScrollLeft (elem: HTMLElement | null, scrollLeft: number) {
|
|
90
|
+
export function setScrollLeft (elem: HTMLElement | null | undefined, scrollLeft: number) {
|
|
91
91
|
if (elem) {
|
|
92
92
|
elem.scrollLeft = scrollLeft
|
|
93
93
|
}
|