Skip to content

Commit dd2671c

Browse files
xuliangzhanxuliangzhan
committed
releases 4.23.0
1 parent a5b8b14 commit dd2671c

7 files changed

Lines changed: 63 additions & 140 deletions

File tree

‎examples/views/table/TableTest10.vue‎

Lines changed: 35 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,43 @@
11
<template>
22
<div>
3-
<vxe-table
4-
border
5-
ref="tableRef"
6-
:row-config="rowConfig"
7-
:row-drag-config="rowDragConfig"
8-
:column-config="columnConfig"
9-
:tree-config="treeConfig"
10-
:data="tableData">
11-
<vxe-column type="seq" width="70"></vxe-column>
12-
<vxe-column field="name" title="Name" min-width="300" tree-node drag-sort></vxe-column>
13-
<vxe-column field="size" title="Size"></vxe-column>
14-
<vxe-column field="type" title="Type"></vxe-column>
3+
<vxe-table border="" show-footer="" show-overflow="" show-header-overflow="" height="500" :row-config="{ useKey: true, isHover: true }" :column-config="{ useKey: true }" :tooltip-config="tooltipConfig" :header-tooltip-config="headerTooltipConfig" :data="tableData">
4+
<vxe-column field="seq" type="seq" width="70"></vxe-column>
5+
<vxe-column field="name" title="名称"></vxe-column>
6+
<vxe-column field="role" title="长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题"></vxe-column>
157
<vxe-column field="date" title="Date"></vxe-column>
8+
<vxe-colgroup title="基本信息">
9+
<vxe-colgroup field="age">
10+
<template #header="">
11+
<span>ffffffffffffffffffffffffffffffffffffffffffffffffffff</span>
12+
</template>
13+
</vxe-colgroup>
14+
<vxe-colgroup title="详细信息">
15+
<vxe-column type="html" field="address" title="详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息" width="160"></vxe-column>
16+
</vxe-colgroup>
17+
</vxe-colgroup>
1618
</vxe-table>
1719
</div>
1820
</template>
1921

20-
<script>
21-
export default {
22-
data () {
23-
const tableData = [
24-
{ id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
25-
{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
26-
{ id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
27-
{ id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
28-
{ id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },
29-
{ id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
30-
{ id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
31-
{ id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },
32-
{ id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },
33-
{ id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
34-
{ id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
35-
{ id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },
36-
{ id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },
37-
{ id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
38-
{ id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },
39-
{ id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },
40-
{ id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
41-
{ id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
42-
]
43-
const rowConfig = {
44-
drag: true
45-
}
46-
const rowDragConfig = {
47-
isCrossDrag: true
48-
}
49-
const columnConfig = {}
50-
const treeConfig = {
51-
transform: true,
52-
rowField: 'id',
53-
parentField: 'parentId'
54-
}
55-
return {
56-
tableData,
57-
rowConfig,
58-
rowDragConfig,
59-
columnConfig,
60-
treeConfig
61-
}
62-
},
63-
methods: {
64-
resultEvent () {
65-
const $table = this.$refs.tableRef
66-
if ($table) {
67-
const tableData = $table.getFullData()
68-
console.log(tableData)
69-
}
70-
}
71-
}
72-
}
22+
<script setup>
23+
import { ref, reactive } from 'vue'
24+
25+
const longText = 'long '.repeat(20)
26+
27+
const tableData = ref([
28+
{ id: 10001, name: longText, role: longText, sex: 'Man', age: 'long '.repeat(12), address: longText },
29+
{ id: 10002, name: longText, role: 'Test', sex: 'Women', age: 22, address: longText },
30+
{ id: 10003, name: longText, role: 'PM', sex: 'Man', age: 32, address: longText },
31+
{ id: 10004, name: longText, role: 'Designer', sex: 'Women', age: 23, address: longText },
32+
{ id: 10005, name: longText, role: 'Develop', sex: 'Women', age: 30, address: longText },
33+
{ id: 10006, name: longText, role: 'Designer', sex: 'Women', age: 21, address: longText },
34+
{ id: 10007, name: longText, role: 'Test', sex: 'Man', age: 29, address: longText },
35+
{ id: 10008, name: longText, role: 'Develop', sex: 'Man', age: 35, address: longText }
36+
])
37+
const headerTooltipConfig = reactive({
38+
enterable: true
39+
})
40+
const tooltipConfig = reactive({
41+
enterable: true
42+
})
7343
</script>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vxe-table",
3-
"version": "4.23.0-beta.2",
3+
"version": "4.23.0-beta.3",
44
"description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
55
"scripts": {
66
"update": "npm install --legacy-peer-deps",
@@ -66,7 +66,7 @@
6666
"typescript": "~5.9.3",
6767
"vue": "3.4.27",
6868
"vue-router": "~4.5.1",
69-
"vxe-pc-ui": "4.20.2"
69+
"vxe-pc-ui": "4.20.8"
7070
},
7171
"vetur": {
7272
"tags": "helper/vetur/tags.json",

‎packages/table/module/custom/panel.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -378,8 +378,8 @@ export default defineVxeComponent({
378378
const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0
379379

380380
if (prevDragGroupField || prevDragAggFnColid) {
381-
if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
382-
$xeTable.handlePivotTableAggregatePanelDragendEvent(evnt)
381+
if ($xeTable.handlePivotTableAggPanelDragendEvent) {
382+
$xeTable.handlePivotTableAggPanelDragendEvent(evnt)
383383
}
384384
} else if (prevDragCol && dragCol) {
385385
// 判断是否有拖动

‎packages/table/module/filter/hook.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ hooks.add('tableFilterModule', {
7575
if (transfer) {
7676
const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
7777
defaultPlacement: 'bottom',
78+
appendTo: '',
7879
isMinWidth: false,
7980
teleportTo: transfer
8081
})

‎packages/table/src/scrollbar.ts‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎packages/table/src/table.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { VxeUI } from '../../ui'
77
import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util'
88
import { getSlotVNs } from '../../ui/src/vn'
99
import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime'
10-
import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './scrollbar'
1110
import { createComponentLog } from '../../ui/src/log'
1211
import { getCrossTableDragRowInfo } from './store'
1312
import Cell from './cell'
@@ -36,7 +35,9 @@ import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, Vx
3635

3736
const { warnLog, errLog } = createComponentLog('table')
3837

39-
const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
38+
const { getConfig, getIcon, getI18n, renderer, formats, scrollbarUtils, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
39+
40+
const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {}
4041

4142
const supportMaxRow = 5e6
4243
const customStorageKey = 'VXE_CUSTOM_STORE'
@@ -425,7 +426,8 @@ export default defineVxeComponent({
425426
})
426427

427428
const computeTooltipOpts = computed(() => {
428-
return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
429+
const { useScrollbar } = props
430+
return Object.assign({ useScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
429431
})
430432

431433
const computeHeaderTooltipOpts = computed(() => {
@@ -14719,7 +14721,8 @@ export default defineVxeComponent({
1471914721
key: 'ctp',
1472014722
ref: refCommTooltip,
1472114723
isArrow: false,
14722-
enterable: false
14724+
enterable: false,
14725+
useScrollbar
1472314726
}),
1472414727
/**
1472514728
* 工具提示
@@ -14742,7 +14745,8 @@ export default defineVxeComponent({
1474214745
maxHeight: tableTipConfig.maxHeight,
1474314746
placement: tableTipConfig.placement,
1474414747
defaultPlacement: tableTipConfig.defaultPlacement,
14745-
popupClassName: tableTipConfig.popupClassName
14748+
popupClassName: tableTipConfig.popupClassName,
14749+
useScrollbar: tableTipConfig.useScrollbar
1474614750
}, currTooltipSlot
1474714751
? {
1474814752
content: () => {
@@ -14781,7 +14785,8 @@ export default defineVxeComponent({
1478114785
theme: validTipConfig.theme,
1478214786
enterable: validTipConfig.enterable,
1478314787
enterDelay: validTipConfig.enterDelay,
14784-
leaveDelay: validTipConfig.leaveDelay
14788+
leaveDelay: validTipConfig.leaveDelay,
14789+
useScrollbar
1478514790
})
1478614791
: renderEmptyElement($xeTable)
1478714792
])

‎packages/ui/src/dom.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ interface PanelPlacementOptions {
288288
defaultLeft?: number
289289
placement?: '' | 'top' | 'bottom' | null
290290
defaultPlacement?: '' | 'top' | 'bottom' | null
291+
appendTo?: string | HTMLElement | ((params: any) => string | HTMLElement)
291292
teleportTo?: boolean
292293
marginSize?: number
293294
isMinWidth?: boolean
@@ -297,7 +298,8 @@ interface PanelPlacementOptions {
297298
* 通用定位计算
298299
*/
299300
export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
300-
const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
301+
const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
302+
appendTo: '',
301303
teleportTo: false,
302304
marginSize: 18,
303305
isMinWidth: true
@@ -311,7 +313,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
311313
const stys: Record<string, string> = {}
312314
if (panelElem && targetElem) {
313315
const bodyEl = document.body
314-
const parentWrapperEl = getPopupWrapperElement(panelElem)
316+
const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem)
315317
if (parentWrapperEl) {
316318
const targetWidth = targetElem.offsetWidth
317319
const targetHeight = targetElem.offsetHeight
@@ -324,16 +326,18 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
324326
const visibleHeight = bodyEl.clientHeight
325327
const visibleWidth = bodyEl.clientWidth
326328

327-
const offsetLeft = parentWrapperRect.left
328-
const offsetTop = parentWrapperRect.top
329+
const parentWrapperScrollLeft = parentWrapperEl.scrollLeft
330+
const parentWrapperScrollTop = parentWrapperEl.scrollTop
331+
const parentWrapperOffsetLeft = parentWrapperRect.left
332+
const parentWrapperOffsetTop = parentWrapperRect.top
329333
const targetLeft = targetRect.left
330334
const targetTop = targetRect.top
331335

332336
minWidth = targetElem.offsetWidth
333337

334338
if (teleportTo) {
335-
left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)
336-
top = defaultTop || (targetTop + targetHeight)
339+
left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft
340+
top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop
337341
if (placement === 'top') {
338342
panelPlacement = 'top'
339343
top = targetTop - panelHeight
@@ -376,8 +380,8 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
376380
}
377381

378382
// 偏移
379-
top -= offsetTop
380-
left -= offsetLeft
383+
top -= parentWrapperOffsetTop
384+
left -= parentWrapperOffsetLeft
381385
} else {
382386
if (placement === 'top') {
383387
panelPlacement = 'top'

0 commit comments

Comments
 (0)