vxe-table 3.12.16 → 3.12.17
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/module/edit/mixin.js +5 -5
- package/es/table/src/body.js +60 -47
- package/es/table/src/methods.js +123 -24
- package/es/table/src/table.js +101 -23
- package/es/table/style.css +26 -0
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +1 -1
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +26 -0
- 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 +350 -113
- 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/edit/mixin.js +10 -5
- package/lib/table/module/edit/mixin.min.js +1 -1
- package/lib/table/src/body.js +71 -59
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/methods.js +141 -23
- package/lib/table/src/methods.min.js +1 -1
- package/lib/table/src/table.js +126 -24
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/style/style.css +26 -0
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +1 -1
- 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 +26 -0
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +1 -1
- package/packages/table/module/edit/mixin.ts +5 -5
- package/packages/table/src/body.ts +62 -48
- package/packages/table/src/methods.ts +125 -24
- package/packages/table/src/table.ts +108 -24
- package/styles/components/table.scss +26 -0
- /package/es/{iconfont.1739333092714.ttf → iconfont.1739428244406.ttf} +0 -0
- /package/es/{iconfont.1739333092714.woff → iconfont.1739428244406.woff} +0 -0
- /package/es/{iconfont.1739333092714.woff2 → iconfont.1739428244406.woff2} +0 -0
- /package/lib/{iconfont.1739333092714.ttf → iconfont.1739428244406.ttf} +0 -0
- /package/lib/{iconfont.1739333092714.woff → iconfont.1739428244406.woff} +0 -0
- /package/lib/{iconfont.1739333092714.woff2 → iconfont.1739428244406.woff2} +0 -0
|
@@ -429,7 +429,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
|
|
|
429
429
|
const tableInternalData = $xeTable as unknown as TableInternalData
|
|
430
430
|
|
|
431
431
|
const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
|
|
432
|
-
const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
|
|
432
|
+
const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove, rowExpandHeightFlag } = tableReactData
|
|
433
433
|
const { fullAllDataRowIdData } = tableInternalData
|
|
434
434
|
const checkboxOpts = $xeTable.computeCheckboxOpts
|
|
435
435
|
const radioOpts = $xeTable.computeRadioOpts
|
|
@@ -462,18 +462,18 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
|
|
|
462
462
|
}
|
|
463
463
|
}
|
|
464
464
|
const rowid = getRowid($xeTable, row)
|
|
465
|
-
const
|
|
465
|
+
const rowRest = fullAllDataRowIdData[rowid]
|
|
466
466
|
let rowLevel = 0
|
|
467
467
|
let seq: string | number = -1
|
|
468
468
|
let _rowIndex = 0
|
|
469
|
-
if (
|
|
470
|
-
rowLevel =
|
|
469
|
+
if (rowRest) {
|
|
470
|
+
rowLevel = rowRest.level
|
|
471
471
|
if (treeConfig && transform && seqMode === 'increasing') {
|
|
472
|
-
seq =
|
|
472
|
+
seq = rowRest._index + 1
|
|
473
473
|
} else {
|
|
474
|
-
seq =
|
|
474
|
+
seq = rowRest.seq
|
|
475
475
|
}
|
|
476
|
-
_rowIndex =
|
|
476
|
+
_rowIndex = rowRest._index
|
|
477
477
|
}
|
|
478
478
|
const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
|
|
479
479
|
// 行是否被展开
|
|
@@ -542,48 +542,66 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
|
|
|
542
542
|
// 如果行被展开了
|
|
543
543
|
if (isExpandRow) {
|
|
544
544
|
const expandOpts = $xeTable.computeExpandOpts
|
|
545
|
-
const { height: expandHeight, padding } = expandOpts
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
|
|
552
|
-
}
|
|
553
|
-
const { showOverflow } = expandColumn
|
|
554
|
-
const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? isAllOverflow : showOverflow
|
|
555
|
-
const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
|
|
556
|
-
rows.push(
|
|
557
|
-
h('tr', {
|
|
558
|
-
class: ['vxe-body--expanded-row', {
|
|
559
|
-
'is--padding': padding
|
|
560
|
-
}],
|
|
561
|
-
key: `expand_${rowid}`,
|
|
562
|
-
style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle) as VxeComponentStyleType : undefined,
|
|
563
|
-
on: trOn
|
|
564
|
-
}, [
|
|
565
|
-
h('td', {
|
|
566
|
-
class: {
|
|
567
|
-
'vxe-body--expanded-column': 1,
|
|
568
|
-
'fixed--hidden': fixedType && !hasFixedColumn,
|
|
569
|
-
'col--ellipsis': hasEllipsis
|
|
570
|
-
},
|
|
545
|
+
const { height: expandHeight, padding, mode: expandMode } = expandOpts
|
|
546
|
+
if (expandMode === 'fixed') {
|
|
547
|
+
rows.push(
|
|
548
|
+
h('tr', {
|
|
549
|
+
class: 'vxe-body--row-expanded-place',
|
|
550
|
+
key: `expand_${rowid}`,
|
|
571
551
|
attrs: {
|
|
572
|
-
|
|
552
|
+
rowid
|
|
573
553
|
}
|
|
574
554
|
}, [
|
|
575
|
-
h('
|
|
576
|
-
class:
|
|
577
|
-
|
|
578
|
-
|
|
555
|
+
h('td', {
|
|
556
|
+
class: 'vxe-body--row-expanded-place-column',
|
|
557
|
+
attrs: {
|
|
558
|
+
colspan: tableColumn.length
|
|
579
559
|
},
|
|
580
|
-
style:
|
|
560
|
+
style: {
|
|
561
|
+
height: `${rowExpandHeightFlag ? (rowRest.expandHeight || expandHeight) : 0}px`
|
|
562
|
+
}
|
|
563
|
+
})
|
|
564
|
+
])
|
|
565
|
+
)
|
|
566
|
+
} else {
|
|
567
|
+
const cellStyle: any = {}
|
|
568
|
+
if (expandHeight) {
|
|
569
|
+
cellStyle.height = `${expandHeight}px`
|
|
570
|
+
}
|
|
571
|
+
if (treeConfig) {
|
|
572
|
+
cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
|
|
573
|
+
}
|
|
574
|
+
const { showOverflow } = expandColumn
|
|
575
|
+
const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? isAllOverflow : showOverflow
|
|
576
|
+
const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
|
|
577
|
+
rows.push(
|
|
578
|
+
h('tr', {
|
|
579
|
+
class: ['vxe-body--expanded-row', {
|
|
580
|
+
'is--padding': padding
|
|
581
|
+
}],
|
|
582
|
+
key: `expand_${rowid}`
|
|
583
|
+
}, [
|
|
584
|
+
h('td', {
|
|
585
|
+
class: ['vxe-body--expanded-column', {
|
|
586
|
+
'fixed--hidden': fixedType && !hasFixedColumn,
|
|
587
|
+
'col--ellipsis': hasEllipsis
|
|
588
|
+
}],
|
|
589
|
+
attrs: {
|
|
590
|
+
colspan: tableColumn.length
|
|
591
|
+
}
|
|
581
592
|
}, [
|
|
582
|
-
|
|
593
|
+
h('div', {
|
|
594
|
+
class: ['vxe-body--expanded-cell', {
|
|
595
|
+
'is--ellipsis': expandHeight
|
|
596
|
+
}],
|
|
597
|
+
style: cellStyle
|
|
598
|
+
}, [
|
|
599
|
+
expandColumn.renderData(h, expandParams)
|
|
600
|
+
])
|
|
583
601
|
])
|
|
584
602
|
])
|
|
585
|
-
|
|
586
|
-
|
|
603
|
+
)
|
|
604
|
+
}
|
|
587
605
|
}
|
|
588
606
|
// 如果是树形表格
|
|
589
607
|
if (isExpandTree) {
|
|
@@ -656,15 +674,14 @@ export default {
|
|
|
656
674
|
const emptyOpts = $xeTable.computeEmptyOpts
|
|
657
675
|
const mouseOpts = $xeTable.computeMouseOpts
|
|
658
676
|
const rowDragOpts = $xeTable.computeRowDragOpts
|
|
659
|
-
const
|
|
660
|
-
const rightFixedWidth = $xeTable.computeRightFixedWidth
|
|
677
|
+
const expandOpts = $xeTable.computeExpandOpts
|
|
661
678
|
|
|
662
679
|
let renderDataList = tableData
|
|
663
680
|
let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
|
|
664
681
|
let isOptimizeMode = false
|
|
665
682
|
// 如果是使用优化模式
|
|
666
683
|
if (scrollXLoad || scrollYLoad || isAllOverflow) {
|
|
667
|
-
if (expandColumn || spanMethod || footerSpanMethod) {
|
|
684
|
+
if ((expandColumn && expandOpts.mode !== 'fixed') || spanMethod || footerSpanMethod) {
|
|
668
685
|
// 如果不支持优化模式
|
|
669
686
|
} else {
|
|
670
687
|
isOptimizeMode = true
|
|
@@ -744,9 +761,6 @@ export default {
|
|
|
744
761
|
$xeTable.triggerBodyScrollEvent(evnt, fixedType)
|
|
745
762
|
}
|
|
746
763
|
}
|
|
747
|
-
if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
|
|
748
|
-
ons.wheel = $xeTable.triggerBodyWheelEvent
|
|
749
|
-
}
|
|
750
764
|
|
|
751
765
|
return h('div', {
|
|
752
766
|
ref: 'refElem',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import XEUtils from 'xe-utils'
|
|
2
|
-
import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, setScrollTop, setScrollLeft } from '../../ui/src/dom'
|
|
2
|
+
import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, setScrollTop, setScrollLeft, toCssUnit } from '../../ui/src/dom'
|
|
3
3
|
import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
|
|
4
4
|
import { VxeUI } from '../../ui'
|
|
5
5
|
import Cell from './cell'
|
|
@@ -329,7 +329,7 @@ function updateAfterListIndex ($xeTable: VxeTableConstructor) {
|
|
|
329
329
|
rowRest.seq = seq
|
|
330
330
|
rowRest._index = index
|
|
331
331
|
} else {
|
|
332
|
-
const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
|
|
332
|
+
const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
|
|
333
333
|
fullAllDataRowIdData[rowid] = rest
|
|
334
334
|
fullDataRowIdData[rowid] = rest
|
|
335
335
|
}
|
|
@@ -361,7 +361,7 @@ function updateAfterDataIndex ($xeTable: VxeTableConstructor) {
|
|
|
361
361
|
rowRest.seq = seq
|
|
362
362
|
rowRest.treeIndex = index
|
|
363
363
|
} else {
|
|
364
|
-
const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
|
|
364
|
+
const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
|
|
365
365
|
fullAllDataRowIdData[rowid] = rest
|
|
366
366
|
fullDataRowIdData[rowid] = rest
|
|
367
367
|
}
|
|
@@ -430,6 +430,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
|
|
|
430
430
|
const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder as HTMLDivElement
|
|
431
431
|
const cellOffsetWidth = $xeTable.computeCellOffsetWidth
|
|
432
432
|
const mouseOpts = $xeTable.computeMouseOpts
|
|
433
|
+
const expandOpts = $xeTable.computeExpandOpts
|
|
433
434
|
const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
|
|
434
435
|
const bodyTableElem = getRefElem(elemStore['main-body-table'])
|
|
435
436
|
if (emptyPlaceholderElem) {
|
|
@@ -503,6 +504,12 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
|
|
|
503
504
|
yBottomCornerEl.style.display = footerHeight ? 'block' : ''
|
|
504
505
|
}
|
|
505
506
|
|
|
507
|
+
const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
|
|
508
|
+
if (rowExpandEl) {
|
|
509
|
+
rowExpandEl.style.height = `${bodyHeight}px`
|
|
510
|
+
rowExpandEl.style.top = `${headerHeight}px`
|
|
511
|
+
}
|
|
512
|
+
|
|
506
513
|
containerList.forEach((name, index) => {
|
|
507
514
|
const fixedType = index > 0 ? name : ''
|
|
508
515
|
const layoutList = ['header', 'body', 'footer']
|
|
@@ -620,7 +627,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
|
|
|
620
627
|
let isOptimizeMode = false
|
|
621
628
|
// 如果是使用优化模式
|
|
622
629
|
if (scrollXLoad || scrollYLoad || isAllOverflow) {
|
|
623
|
-
if (expandColumn || spanMethod || footerSpanMethod) {
|
|
630
|
+
if ((expandColumn && expandOpts.mode !== 'fixed') || spanMethod || footerSpanMethod) {
|
|
624
631
|
// 如果不支持优化模式
|
|
625
632
|
} else {
|
|
626
633
|
isOptimizeMode = true
|
|
@@ -752,6 +759,15 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
|
|
|
752
759
|
return $xeTable.$nextTick()
|
|
753
760
|
}
|
|
754
761
|
|
|
762
|
+
function calcVarRowHeightConfig ($xeTable: VxeTableConstructor, sizeKey: 'default' | 'medium' | 'small' | 'mini', sizeEl: Element) {
|
|
763
|
+
const reactData = $xeTable as unknown as TableReactData
|
|
764
|
+
|
|
765
|
+
const { rowHeightStore } = reactData
|
|
766
|
+
if (sizeEl && sizeEl.clientHeight) {
|
|
767
|
+
rowHeightStore[sizeKey] = sizeEl.clientHeight
|
|
768
|
+
}
|
|
769
|
+
}
|
|
770
|
+
|
|
755
771
|
function computeRowHeight ($xeTable: VxeTableConstructor) {
|
|
756
772
|
const reactData = $xeTable as unknown as TableReactData
|
|
757
773
|
|
|
@@ -787,8 +803,9 @@ function handleVirtualYVisible ($xeTable: VxeTableConstructor, currScrollTop?: n
|
|
|
787
803
|
const reactData = $xeTable as unknown as TableReactData
|
|
788
804
|
const internalData = $xeTable as unknown as TableInternalData
|
|
789
805
|
|
|
790
|
-
const { isAllOverflow } = reactData
|
|
806
|
+
const { isAllOverflow, expandColumn, rowExpandedMaps } = reactData
|
|
791
807
|
const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData
|
|
808
|
+
const expandOpts = $xeTable.computeExpandOpts
|
|
792
809
|
const rowOpts = $xeTable.computeRowOpts
|
|
793
810
|
const cellOpts = $xeTable.computeCellOpts
|
|
794
811
|
const defaultRowHeight = $xeTable.computeDefaultRowHeight
|
|
@@ -801,7 +818,7 @@ function handleVirtualYVisible ($xeTable: VxeTableConstructor, currScrollTop?: n
|
|
|
801
818
|
let offsetTop = 0
|
|
802
819
|
let visibleSize = 0
|
|
803
820
|
const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
|
|
804
|
-
if (!isCustomCellHeight && isAllOverflow) {
|
|
821
|
+
if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
|
|
805
822
|
toVisibleIndex = Math.floor(scrollTop / defaultRowHeight)
|
|
806
823
|
visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1
|
|
807
824
|
} else {
|
|
@@ -819,6 +836,10 @@ function handleVirtualYVisible ($xeTable: VxeTableConstructor, currScrollTop?: n
|
|
|
819
836
|
break
|
|
820
837
|
}
|
|
821
838
|
}
|
|
839
|
+
// 是否展开行
|
|
840
|
+
if (expandColumn && rowExpandedMaps[rowid]) {
|
|
841
|
+
offsetTop += rowRest.expandHeight || expandOpts.height || 0
|
|
842
|
+
}
|
|
822
843
|
}
|
|
823
844
|
}
|
|
824
845
|
return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) }
|
|
@@ -1459,9 +1480,18 @@ function handleRecalculateLayout ($xeTable: VxeTableConstructor & VxeTablePrivat
|
|
|
1459
1480
|
if (!el || !el.clientWidth) {
|
|
1460
1481
|
return $xeTable.$nextTick()
|
|
1461
1482
|
}
|
|
1483
|
+
const varEl = $xeTable.$refs.refVarElem as HTMLDivElement
|
|
1484
|
+
if (varEl) {
|
|
1485
|
+
const [defEl, mediumEl, smallEl, miniEl] = varEl.children
|
|
1486
|
+
calcVarRowHeightConfig($xeTable, 'default', defEl)
|
|
1487
|
+
calcVarRowHeightConfig($xeTable, 'medium', mediumEl)
|
|
1488
|
+
calcVarRowHeightConfig($xeTable, 'small', smallEl)
|
|
1489
|
+
calcVarRowHeightConfig($xeTable, 'mini', miniEl)
|
|
1490
|
+
}
|
|
1462
1491
|
calcCellWidth($xeTable)
|
|
1463
1492
|
autoCellWidth($xeTable)
|
|
1464
1493
|
updateStyle($xeTable)
|
|
1494
|
+
updateRowExpandStyle($xeTable)
|
|
1465
1495
|
return computeScrollLoad($xeTable).then(() => {
|
|
1466
1496
|
if (reFull === true) {
|
|
1467
1497
|
// 初始化时需要在列计算之后再执行优化运算,达到最优显示效果
|
|
@@ -1469,6 +1499,7 @@ function handleRecalculateLayout ($xeTable: VxeTableConstructor & VxeTablePrivat
|
|
|
1469
1499
|
calcCellWidth($xeTable)
|
|
1470
1500
|
autoCellWidth($xeTable)
|
|
1471
1501
|
updateStyle($xeTable)
|
|
1502
|
+
updateRowExpandStyle($xeTable)
|
|
1472
1503
|
return computeScrollLoad($xeTable)
|
|
1473
1504
|
}
|
|
1474
1505
|
})
|
|
@@ -1907,7 +1938,7 @@ function calcCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
|
|
|
1907
1938
|
}
|
|
1908
1939
|
}
|
|
1909
1940
|
|
|
1910
|
-
|
|
1941
|
+
function handleUpdateColResize ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: MouseEvent, params: any) {
|
|
1911
1942
|
$xeTable.analyColumnWidth()
|
|
1912
1943
|
$xeTable.recalculate(true).then(() => {
|
|
1913
1944
|
$xeTable.saveCustomStore('update:width')
|
|
@@ -1919,7 +1950,7 @@ const handleUpdateColResize = ($xeTable: VxeTableConstructor & VxeTablePrivateMe
|
|
|
1919
1950
|
})
|
|
1920
1951
|
}
|
|
1921
1952
|
|
|
1922
|
-
|
|
1953
|
+
function handleUpdateRowResize ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: MouseEvent, params: any) {
|
|
1923
1954
|
const reactData = $xeTable as unknown as TableReactData
|
|
1924
1955
|
|
|
1925
1956
|
reactData.resizeHeightFlag++
|
|
@@ -1930,6 +1961,65 @@ const handleUpdateRowResize = ($xeTable: VxeTableConstructor & VxeTablePrivateMe
|
|
|
1930
1961
|
})
|
|
1931
1962
|
}
|
|
1932
1963
|
|
|
1964
|
+
function updateRowExpandStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
|
|
1965
|
+
const reactData = $xeTable as unknown as TableReactData
|
|
1966
|
+
const internalData = $xeTable as unknown as TableInternalData
|
|
1967
|
+
|
|
1968
|
+
const { expandColumn, scrollYLoad, rowExpandedMaps } = reactData
|
|
1969
|
+
const expandOpts = $xeTable.computeExpandOpts
|
|
1970
|
+
const rowOpts = $xeTable.computeRowOpts
|
|
1971
|
+
const cellOpts = $xeTable.computeCellOpts
|
|
1972
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight
|
|
1973
|
+
const { mode } = expandOpts
|
|
1974
|
+
if (expandColumn && mode === 'fixed') {
|
|
1975
|
+
const { elemStore, afterFullData, fullAllDataRowIdData } = internalData
|
|
1976
|
+
const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
|
|
1977
|
+
const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
|
|
1978
|
+
if (rowExpandEl && bodyScrollElem) {
|
|
1979
|
+
let isUpdateHeight = false
|
|
1980
|
+
if (scrollYLoad) {
|
|
1981
|
+
let offsetTop = 0
|
|
1982
|
+
for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
|
|
1983
|
+
const row = afterFullData[rIndex]
|
|
1984
|
+
const rowid = getRowid($xeTable, row)
|
|
1985
|
+
const rowRest = fullAllDataRowIdData[rowid] || {}
|
|
1986
|
+
rowRest.oTop = offsetTop
|
|
1987
|
+
offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
|
|
1988
|
+
// 是否展开行
|
|
1989
|
+
if (expandColumn && rowExpandedMaps[rowid]) {
|
|
1990
|
+
offsetTop += rowRest.expandHeight || expandOpts.height || 0
|
|
1991
|
+
}
|
|
1992
|
+
}
|
|
1993
|
+
}
|
|
1994
|
+
XEUtils.arrayEach(rowExpandEl.children, reEl => {
|
|
1995
|
+
const expandEl = reEl as HTMLDivElement
|
|
1996
|
+
const rowid = expandEl.getAttribute('rowid') || ''
|
|
1997
|
+
const rowRest = fullAllDataRowIdData[rowid]
|
|
1998
|
+
if (rowRest) {
|
|
1999
|
+
const expandHeight = expandEl.offsetHeight + 1
|
|
2000
|
+
if (scrollYLoad) {
|
|
2001
|
+
expandEl.style.top = toCssUnit(rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight))
|
|
2002
|
+
} else {
|
|
2003
|
+
const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`) as HTMLTableCellElement
|
|
2004
|
+
if (trEl) {
|
|
2005
|
+
expandEl.style.top = toCssUnit(trEl.offsetTop + trEl.offsetHeight)
|
|
2006
|
+
}
|
|
2007
|
+
}
|
|
2008
|
+
if (!isUpdateHeight) {
|
|
2009
|
+
if (rowRest.expandHeight !== expandHeight) {
|
|
2010
|
+
isUpdateHeight = true
|
|
2011
|
+
}
|
|
2012
|
+
}
|
|
2013
|
+
rowRest.expandHeight = expandHeight
|
|
2014
|
+
}
|
|
2015
|
+
})
|
|
2016
|
+
if (isUpdateHeight) {
|
|
2017
|
+
reactData.rowExpandHeightFlag++
|
|
2018
|
+
}
|
|
2019
|
+
}
|
|
2020
|
+
}
|
|
2021
|
+
}
|
|
2022
|
+
|
|
1933
2023
|
const Methods = {
|
|
1934
2024
|
callSlot (slotFunc: any, params: any, h: any, vNodes: any) {
|
|
1935
2025
|
if (slotFunc) {
|
|
@@ -2313,7 +2403,7 @@ const Methods = {
|
|
|
2313
2403
|
}
|
|
2314
2404
|
let cacheItem = fullAllDataRowIdData[rowid]
|
|
2315
2405
|
if (isReset || !cacheItem) {
|
|
2316
|
-
cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0 }
|
|
2406
|
+
cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
|
|
2317
2407
|
}
|
|
2318
2408
|
cacheItem.row = row
|
|
2319
2409
|
cacheItem.items = items
|
|
@@ -2386,7 +2476,7 @@ const Methods = {
|
|
|
2386
2476
|
XEUtils.eachTree(rows, (childRow, index, items, path, parentItem, nodes) => {
|
|
2387
2477
|
const rowid = getRowid($xeTable, childRow)
|
|
2388
2478
|
const parentRow = parentItem || parentRest.row
|
|
2389
|
-
const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0 }
|
|
2479
|
+
const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
|
|
2390
2480
|
fullDataRowIdData[rowid] = rest
|
|
2391
2481
|
fullAllDataRowIdData[rowid] = rest
|
|
2392
2482
|
}, { children: childrenField })
|
|
@@ -4226,6 +4316,7 @@ const Methods = {
|
|
|
4226
4316
|
const el = $xeTable.$refs.refElem as HTMLElement
|
|
4227
4317
|
if (el && el.clientWidth) {
|
|
4228
4318
|
autoCellWidth($xeTable)
|
|
4319
|
+
updateRowExpandStyle($xeTable)
|
|
4229
4320
|
}
|
|
4230
4321
|
if (rceTimeout) {
|
|
4231
4322
|
clearTimeout(rceTimeout)
|
|
@@ -7919,6 +8010,7 @@ const Methods = {
|
|
|
7919
8010
|
direction,
|
|
7920
8011
|
...params
|
|
7921
8012
|
}
|
|
8013
|
+
updateRowExpandStyle($xeTable)
|
|
7922
8014
|
checkLastSyncScroll($xeTable, isRollX, isRollY)
|
|
7923
8015
|
if (rowOpts.isHover || highlightHoverRow) {
|
|
7924
8016
|
$xeTable.clearHoverRow()
|
|
@@ -7974,6 +8066,7 @@ const Methods = {
|
|
|
7974
8066
|
const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
|
|
7975
8067
|
const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
|
|
7976
8068
|
const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
|
|
8069
|
+
const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
|
|
7977
8070
|
if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
|
|
7978
8071
|
return
|
|
7979
8072
|
}
|
|
@@ -8020,6 +8113,7 @@ const Methods = {
|
|
|
8020
8113
|
setScrollTop(rightScrollElem, scrollTop)
|
|
8021
8114
|
}
|
|
8022
8115
|
setScrollTop(yHandleEl, scrollTop)
|
|
8116
|
+
setScrollTop(rowExpandEl, scrollTop)
|
|
8023
8117
|
if (scrollYLoad) {
|
|
8024
8118
|
$xeTable.triggerScrollYEvent(evnt)
|
|
8025
8119
|
}
|
|
@@ -8142,6 +8236,7 @@ const Methods = {
|
|
|
8142
8236
|
const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
|
|
8143
8237
|
const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
|
|
8144
8238
|
const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
|
|
8239
|
+
const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
|
|
8145
8240
|
|
|
8146
8241
|
if (!xHandleEl) {
|
|
8147
8242
|
return
|
|
@@ -8183,6 +8278,7 @@ const Methods = {
|
|
|
8183
8278
|
setScrollTop(bodyScrollElem, currTopNum)
|
|
8184
8279
|
setScrollTop(leftScrollElem, currTopNum)
|
|
8185
8280
|
setScrollTop(rightScrollElem, currTopNum)
|
|
8281
|
+
setScrollTop(rowExpandEl, currTopNum)
|
|
8186
8282
|
if (scrollYLoad) {
|
|
8187
8283
|
$xeTable.triggerScrollYEvent(evnt)
|
|
8188
8284
|
}
|
|
@@ -8191,18 +8287,6 @@ const Methods = {
|
|
|
8191
8287
|
fixed: ''
|
|
8192
8288
|
})
|
|
8193
8289
|
})
|
|
8194
|
-
|
|
8195
|
-
// internalData.inWheelScroll = true
|
|
8196
|
-
// setScrollTop(yHandleEl, scrollTop)
|
|
8197
|
-
// setScrollTop(bodyScrollElem, scrollTop)
|
|
8198
|
-
// setScrollTop(leftScrollElem, scrollTop)
|
|
8199
|
-
// setScrollTop(rightScrollElem, scrollTop)
|
|
8200
|
-
|
|
8201
|
-
// loadScrollYData($xeTable, scrollTop)
|
|
8202
|
-
// $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
|
|
8203
|
-
// type: 'footer',
|
|
8204
|
-
// fixed: ''
|
|
8205
|
-
// })
|
|
8206
8290
|
}
|
|
8207
8291
|
},
|
|
8208
8292
|
triggerVirtualScrollXEvent (evnt: Event) {
|
|
@@ -8260,6 +8344,7 @@ const Methods = {
|
|
|
8260
8344
|
const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
|
|
8261
8345
|
const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
|
|
8262
8346
|
const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
|
|
8347
|
+
const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
|
|
8263
8348
|
const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
|
|
8264
8349
|
const wrapperEl = evnt.currentTarget as HTMLDivElement
|
|
8265
8350
|
const { scrollTop } = wrapperEl
|
|
@@ -8275,6 +8360,7 @@ const Methods = {
|
|
|
8275
8360
|
setScrollTop(bodyScrollElem, scrollTop)
|
|
8276
8361
|
setScrollTop(leftScrollElem, scrollTop)
|
|
8277
8362
|
setScrollTop(rightScrollElem, scrollTop)
|
|
8363
|
+
setScrollTop(rowExpandEl, scrollTop)
|
|
8278
8364
|
if (scrollYLoad) {
|
|
8279
8365
|
$xeTable.triggerScrollYEvent(evnt)
|
|
8280
8366
|
}
|
|
@@ -8289,6 +8375,7 @@ const Methods = {
|
|
|
8289
8375
|
|
|
8290
8376
|
const { isAllOverflow } = reactData
|
|
8291
8377
|
handleTableColumn($xeTable)
|
|
8378
|
+
$xeTable.updateScrollXSpace()
|
|
8292
8379
|
return $xeTable.$nextTick().then(() => {
|
|
8293
8380
|
handleTableColumn($xeTable)
|
|
8294
8381
|
$xeTable.updateScrollXSpace()
|
|
@@ -8350,6 +8437,7 @@ const Methods = {
|
|
|
8350
8437
|
const $xeTable = this
|
|
8351
8438
|
|
|
8352
8439
|
$xeTable.handleTableData()
|
|
8440
|
+
$xeTable.updateScrollYSpace()
|
|
8353
8441
|
return $xeTable.$nextTick().then(() => {
|
|
8354
8442
|
$xeTable.handleTableData()
|
|
8355
8443
|
$xeTable.updateScrollYSpace()
|
|
@@ -8361,9 +8449,10 @@ const Methods = {
|
|
|
8361
8449
|
const reactData = $xeTable as unknown as TableReactData
|
|
8362
8450
|
const internalData = $xeTable as unknown as TableInternalData
|
|
8363
8451
|
|
|
8364
|
-
const { isAllOverflow, scrollYLoad } = reactData
|
|
8452
|
+
const { isAllOverflow, scrollYLoad, expandColumn, rowExpandedMaps } = reactData
|
|
8365
8453
|
const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData
|
|
8366
8454
|
const { startIndex } = scrollYStore
|
|
8455
|
+
const expandOpts = $xeTable.computeExpandOpts
|
|
8367
8456
|
const rowOpts = $xeTable.computeRowOpts
|
|
8368
8457
|
const cellOpts = $xeTable.computeCellOpts
|
|
8369
8458
|
const defaultRowHeight = $xeTable.computeDefaultRowHeight
|
|
@@ -8374,7 +8463,7 @@ const Methods = {
|
|
|
8374
8463
|
|
|
8375
8464
|
if (scrollYLoad) {
|
|
8376
8465
|
const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
|
|
8377
|
-
if (!isCustomCellHeight && isAllOverflow) {
|
|
8466
|
+
if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
|
|
8378
8467
|
ySpaceHeight = afterFullData.length * defaultRowHeight
|
|
8379
8468
|
topSpaceHeight = Math.max(0, startIndex * defaultRowHeight)
|
|
8380
8469
|
} else {
|
|
@@ -8383,12 +8472,20 @@ const Methods = {
|
|
|
8383
8472
|
const rowid = getRowid($xeTable, row)
|
|
8384
8473
|
const rowRest = fullAllDataRowIdData[rowid] || {}
|
|
8385
8474
|
ySpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
|
|
8475
|
+
// 是否展开行
|
|
8476
|
+
if (expandColumn && rowExpandedMaps[rowid]) {
|
|
8477
|
+
ySpaceHeight += rowRest.expandHeight || expandOpts.height || 0
|
|
8478
|
+
}
|
|
8386
8479
|
}
|
|
8387
8480
|
for (let i = 0; i < startIndex; i++) {
|
|
8388
8481
|
const row = afterFullData[i]
|
|
8389
8482
|
const rowid = getRowid($xeTable, row)
|
|
8390
8483
|
const rowRest = fullAllDataRowIdData[rowid] || {}
|
|
8391
8484
|
topSpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
|
|
8485
|
+
// 是否展开行
|
|
8486
|
+
if (expandColumn && rowExpandedMaps[rowid]) {
|
|
8487
|
+
topSpaceHeight += rowRest.expandHeight || expandOpts.height || 0
|
|
8488
|
+
}
|
|
8392
8489
|
}
|
|
8393
8490
|
}
|
|
8394
8491
|
} else {
|
|
@@ -8413,6 +8510,10 @@ const Methods = {
|
|
|
8413
8510
|
if (scrollYSpaceEl) {
|
|
8414
8511
|
scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
|
|
8415
8512
|
}
|
|
8513
|
+
const rowExpandYSpaceEl = $xeTable.$refs.refRowExpandYSpaceElem as HTMLDivElement
|
|
8514
|
+
if (rowExpandYSpaceEl) {
|
|
8515
|
+
rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
|
|
8516
|
+
}
|
|
8416
8517
|
return $xeTable.$nextTick().then(() => {
|
|
8417
8518
|
updateStyle($xeTable)
|
|
8418
8519
|
})
|