vxe-table 4.10.6-beta.3 → 4.10.6-beta.31
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/grid/src/grid.js +1 -1
- package/es/index.css +1 -1
- package/es/index.min.css +1 -1
- package/es/locale/lang/ar-EG.js +2 -1
- package/es/locale/lang/de-DE.js +2 -1
- package/es/locale/lang/en-US.js +4 -3
- package/es/locale/lang/es-ES.js +2 -1
- package/es/locale/lang/fr-FR.js +2 -1
- package/es/locale/lang/hu-HU.js +2 -1
- package/es/locale/lang/hy-AM.js +2 -1
- package/es/locale/lang/it-IT.js +2 -1
- package/es/locale/lang/ja-JP.js +2 -1
- package/es/locale/lang/ko-KR.js +2 -1
- package/es/locale/lang/nb-NO.js +2 -1
- package/es/locale/lang/pt-BR.js +2 -1
- package/es/locale/lang/ru-RU.js +4 -3
- package/es/locale/lang/th-TH.js +2 -1
- package/es/locale/lang/ug-CN.js +2 -1
- package/es/locale/lang/uk-UA.js +518 -517
- package/es/locale/lang/vi-VN.js +2 -1
- package/es/locale/lang/zh-CHT.js +2 -1
- package/es/locale/lang/zh-CN.js +2 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/module/edit/hook.js +7 -7
- package/es/table/module/export/hook.js +97 -62
- package/es/table/module/keyboard/hook.js +63 -27
- package/es/table/src/body.js +112 -77
- package/es/table/src/cell.js +41 -55
- package/es/table/src/column.js +13 -1
- package/es/table/src/columnInfo.js +3 -0
- package/es/table/src/emits.js +2 -0
- package/es/table/src/footer.js +32 -8
- package/es/table/src/header.js +73 -158
- package/es/table/src/props.js +14 -4
- package/es/table/src/table.js +1179 -634
- package/es/table/src/util.js +77 -62
- package/es/table/style.css +357 -213
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +26 -11
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +357 -213
- package/es/vxe-table/style.min.css +1 -1
- package/lib/grid/src/grid.js +1 -1
- package/lib/grid/src/grid.min.js +1 -1
- package/lib/index.css +1 -1
- package/lib/index.min.css +1 -1
- package/lib/index.umd.js +1852 -1165
- package/lib/index.umd.min.js +1 -1
- package/lib/locale/lang/ar-EG.js +2 -1
- package/lib/locale/lang/ar-EG.min.js +1 -1
- package/lib/locale/lang/de-DE.js +2 -1
- package/lib/locale/lang/de-DE.min.js +1 -1
- package/lib/locale/lang/en-US.js +4 -3
- package/lib/locale/lang/en-US.min.js +1 -1
- package/lib/locale/lang/en-US.umd.js +4 -3
- package/lib/locale/lang/es-ES.js +2 -1
- package/lib/locale/lang/es-ES.min.js +1 -1
- package/lib/locale/lang/es-ES.umd.js +2 -1
- package/lib/locale/lang/fr-FR.js +2 -1
- package/lib/locale/lang/fr-FR.min.js +1 -1
- package/lib/locale/lang/hu-HU.js +2 -1
- package/lib/locale/lang/hu-HU.min.js +1 -1
- package/lib/locale/lang/hu-HU.umd.js +2 -1
- package/lib/locale/lang/hy-AM.js +2 -1
- package/lib/locale/lang/hy-AM.min.js +1 -1
- package/lib/locale/lang/it-IT.js +2 -1
- package/lib/locale/lang/it-IT.min.js +1 -1
- package/lib/locale/lang/ja-JP.js +2 -1
- package/lib/locale/lang/ja-JP.min.js +1 -1
- package/lib/locale/lang/ja-JP.umd.js +2 -1
- package/lib/locale/lang/ko-KR.js +2 -1
- package/lib/locale/lang/ko-KR.min.js +1 -1
- package/lib/locale/lang/ko-KR.umd.js +2 -1
- package/lib/locale/lang/nb-NO.js +2 -1
- package/lib/locale/lang/nb-NO.min.js +1 -1
- package/lib/locale/lang/pt-BR.js +2 -1
- package/lib/locale/lang/pt-BR.min.js +1 -1
- package/lib/locale/lang/pt-BR.umd.js +2 -1
- package/lib/locale/lang/ru-RU.js +4 -3
- package/lib/locale/lang/ru-RU.min.js +1 -1
- package/lib/locale/lang/ru-RU.umd.js +4 -3
- package/lib/locale/lang/th-TH.js +2 -1
- package/lib/locale/lang/th-TH.min.js +1 -1
- package/lib/locale/lang/ug-CN.js +2 -1
- package/lib/locale/lang/ug-CN.min.js +1 -1
- package/lib/locale/lang/uk-UA.js +518 -517
- package/lib/locale/lang/uk-UA.min.js +1 -1
- package/lib/locale/lang/uk-UA.umd.js +518 -517
- package/lib/locale/lang/vi-VN.js +2 -1
- package/lib/locale/lang/vi-VN.min.js +1 -1
- package/lib/locale/lang/zh-CHT.js +2 -1
- package/lib/locale/lang/zh-CHT.min.js +1 -1
- package/lib/locale/lang/zh-CN.js +2 -1
- package/lib/locale/lang/zh-CN.min.js +1 -1
- package/lib/locale/lang/zh-CN.umd.js +2 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/module/edit/hook.js +12 -2
- package/lib/table/module/edit/hook.min.js +1 -1
- package/lib/table/module/export/hook.js +97 -57
- package/lib/table/module/export/hook.min.js +1 -1
- package/lib/table/module/keyboard/hook.js +71 -28
- package/lib/table/module/keyboard/hook.min.js +1 -1
- package/lib/table/src/body.js +104 -76
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/cell.js +32 -42
- package/lib/table/src/cell.min.js +1 -1
- package/lib/table/src/column.js +13 -1
- package/lib/table/src/column.min.js +1 -1
- package/lib/table/src/columnInfo.js +3 -0
- package/lib/table/src/columnInfo.min.js +1 -1
- package/lib/table/src/emits.js +1 -1
- package/lib/table/src/emits.min.js +1 -1
- package/lib/table/src/footer.js +30 -8
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/header.js +57 -169
- package/lib/table/src/header.min.js +1 -1
- package/lib/table/src/props.js +14 -4
- package/lib/table/src/props.min.js +1 -1
- package/lib/table/src/table.js +1234 -626
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/src/util.js +100 -82
- package/lib/table/src/util.min.js +1 -1
- package/lib/table/style/style.css +357 -213
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +26 -11
- 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 +357 -213
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +2 -2
- package/packages/grid/src/grid.ts +1 -1
- package/packages/locale/lang/ar-EG.ts +2 -1
- package/packages/locale/lang/de-DE.ts +2 -1
- package/packages/locale/lang/en-US.ts +4 -3
- package/packages/locale/lang/es-ES.ts +2 -1
- package/packages/locale/lang/fr-FR.ts +2 -1
- package/packages/locale/lang/hu-HU.ts +2 -1
- package/packages/locale/lang/hy-AM.ts +2 -1
- package/packages/locale/lang/it-IT.ts +2 -1
- package/packages/locale/lang/ja-JP.ts +2 -1
- package/packages/locale/lang/ko-KR.ts +2 -1
- package/packages/locale/lang/nb-NO.ts +2 -1
- package/packages/locale/lang/pt-BR.ts +2 -1
- package/packages/locale/lang/ru-RU.ts +4 -3
- package/packages/locale/lang/th-TH.ts +2 -1
- package/packages/locale/lang/ug-CN.ts +2 -1
- package/packages/locale/lang/uk-UA.ts +518 -517
- package/packages/locale/lang/vi-VN.ts +2 -1
- package/packages/locale/lang/zh-CHT.ts +2 -1
- package/packages/locale/lang/zh-CN.ts +2 -1
- package/packages/table/module/edit/hook.ts +7 -7
- package/packages/table/module/export/hook.ts +118 -65
- package/packages/table/module/keyboard/hook.ts +59 -25
- package/packages/table/src/body.ts +122 -80
- package/packages/table/src/cell.ts +41 -63
- package/packages/table/src/column.ts +13 -1
- package/packages/table/src/columnInfo.ts +3 -0
- package/packages/table/src/emits.ts +5 -1
- package/packages/table/src/footer.ts +32 -8
- package/packages/table/src/header.ts +73 -158
- package/packages/table/src/props.ts +14 -5
- package/packages/table/src/table.ts +1183 -632
- package/packages/table/src/util.ts +81 -62
- package/packages/ui/index.ts +25 -10
- package/styles/components/table.scss +428 -290
- package/styles/theme/base.scss +4 -6
- package/styles/theme/dark.scss +1 -0
- package/styles/theme/light.scss +1 -0
- package/styles/variable.scss +1 -1
- /package/es/{iconfont.1736748534420.ttf → iconfont.1737526556258.ttf} +0 -0
- /package/es/{iconfont.1736748534420.woff → iconfont.1737526556258.woff} +0 -0
- /package/es/{iconfont.1736748534420.woff2 → iconfont.1737526556258.woff2} +0 -0
- /package/lib/{iconfont.1736748534420.ttf → iconfont.1737526556258.ttf} +0 -0
- /package/lib/{iconfont.1736748534420.woff → iconfont.1737526556258.woff} +0 -0
- /package/lib/{iconfont.1736748534420.woff2 → iconfont.1737526556258.woff2} +0 -0
|
@@ -2,6 +2,7 @@ import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTi
|
|
|
2
2
|
import XEUtils from 'xe-utils'
|
|
3
3
|
import { VxeUI } from '../../ui'
|
|
4
4
|
import { updateCellTitle, getPropClass } from '../../ui/src/dom'
|
|
5
|
+
import { getCellHeight } from './util'
|
|
5
6
|
|
|
6
7
|
import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines } from '../../../types'
|
|
7
8
|
|
|
@@ -47,7 +48,7 @@ export default defineComponent({
|
|
|
47
48
|
const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
|
|
48
49
|
|
|
49
50
|
const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
|
|
50
|
-
const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts } = $xeTable.getComputeMaps()
|
|
51
|
+
const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
|
|
51
52
|
|
|
52
53
|
const refElem = ref() as Ref<HTMLDivElement>
|
|
53
54
|
const refFooterScroll = ref() as Ref<HTMLDivElement>
|
|
@@ -63,21 +64,27 @@ export default defineComponent({
|
|
|
63
64
|
const { scrollXStore } = tableInternalData
|
|
64
65
|
const tooltipOpts = computeTooltipOpts.value
|
|
65
66
|
const columnOpts = computeColumnOpts.value
|
|
67
|
+
const defaultRowHeight = computeDefaultRowHeight.value
|
|
68
|
+
const cellOpts = computeCellOpts.value
|
|
69
|
+
const footerCellOpts = computeFooterCellOpts.value
|
|
70
|
+
const currCellHeight = getCellHeight(footerCellOpts.height || cellOpts.height) || defaultRowHeight
|
|
66
71
|
|
|
67
72
|
return tableColumn.map((column, $columnIndex) => {
|
|
68
73
|
const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
|
|
74
|
+
const colid = column.id
|
|
69
75
|
const renderOpts = editRender || cellRender
|
|
70
76
|
const compConf = renderOpts ? renderer.get(renderOpts.name) : null
|
|
71
77
|
const showAllTip = tooltipOpts.showAll
|
|
72
78
|
const isColGroup = column.children && column.children.length
|
|
73
79
|
const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
|
|
80
|
+
const isPadding = XEUtils.isBoolean(footerCellOpts.padding) ? footerCellOpts.padding : cellOpts.padding
|
|
74
81
|
const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
|
|
75
82
|
const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
|
|
76
83
|
let showEllipsis = footOverflow === 'ellipsis'
|
|
77
84
|
const showTitle = footOverflow === 'title'
|
|
78
85
|
const showTooltip = footOverflow === true || footOverflow === 'tooltip'
|
|
79
86
|
let hasEllipsis = showTitle || showTooltip || showEllipsis
|
|
80
|
-
const attrs: any = { colid
|
|
87
|
+
const attrs: any = { colid }
|
|
81
88
|
const tfOns: any = {}
|
|
82
89
|
const columnIndex = $xeTable.getColumnIndex(column)
|
|
83
90
|
const _columnIndex = $xeTable.getVTColumnIndex(column)
|
|
@@ -153,20 +160,29 @@ export default defineComponent({
|
|
|
153
160
|
attrs.colspan = colspan
|
|
154
161
|
}
|
|
155
162
|
}
|
|
163
|
+
const isLastColumn = $columnIndex === tableColumn.length - 1
|
|
156
164
|
const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
|
|
157
165
|
|
|
158
|
-
let
|
|
159
|
-
if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
|
|
160
|
-
|
|
166
|
+
let isVNPreEmptyStatus = false
|
|
167
|
+
if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
|
|
168
|
+
isVNPreEmptyStatus = true
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
const tcStyle: Record<string, string> = {}
|
|
172
|
+
if (hasEllipsis) {
|
|
173
|
+
tcStyle.height = `${currCellHeight}px`
|
|
174
|
+
} else {
|
|
175
|
+
tcStyle.minHeight = `${currCellHeight}px`
|
|
161
176
|
}
|
|
162
177
|
|
|
163
178
|
return h('td', {
|
|
164
179
|
class: ['vxe-footer--column', column.id, {
|
|
165
180
|
[`col--${footAlign}`]: footAlign,
|
|
166
181
|
[`col--${type}`]: type,
|
|
167
|
-
'col--last':
|
|
182
|
+
'col--last': isLastColumn,
|
|
168
183
|
'fixed--width': !isAutoCellWidth,
|
|
169
184
|
'fixed--hidden': fixedHiddenColumn,
|
|
185
|
+
'is--padding': isPadding,
|
|
170
186
|
'col--ellipsis': hasEllipsis,
|
|
171
187
|
'col--current': currentColumn === column
|
|
172
188
|
}, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)],
|
|
@@ -180,8 +196,16 @@ export default defineComponent({
|
|
|
180
196
|
'c--title': showTitle,
|
|
181
197
|
'c--tooltip': showTooltip,
|
|
182
198
|
'c--ellipsis': showEllipsis
|
|
183
|
-
}]
|
|
184
|
-
|
|
199
|
+
}],
|
|
200
|
+
style: tcStyle
|
|
201
|
+
}, isVNPreEmptyStatus
|
|
202
|
+
? []
|
|
203
|
+
: [
|
|
204
|
+
h('div', {
|
|
205
|
+
colid,
|
|
206
|
+
class: 'vxe-cell--wrapper'
|
|
207
|
+
}, column.renderFooter(cellParams))
|
|
208
|
+
])
|
|
185
209
|
])
|
|
186
210
|
})
|
|
187
211
|
}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
|
|
2
2
|
import XEUtils from 'xe-utils'
|
|
3
3
|
import { VxeUI } from '../../ui'
|
|
4
|
-
import {
|
|
5
|
-
import { hasClass, getOffsetPos, addClass, removeClass } from '../../ui/src/dom'
|
|
4
|
+
import { getCellHeight, convertHeaderColumnToRows } from './util'
|
|
6
5
|
|
|
7
6
|
import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
|
|
8
7
|
|
|
9
|
-
const {
|
|
8
|
+
const { renderer, renderEmptyElement } = VxeUI
|
|
10
9
|
|
|
11
10
|
const renderType = 'header'
|
|
12
11
|
|
|
@@ -26,8 +25,7 @@ export default defineComponent({
|
|
|
26
25
|
const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
|
|
27
26
|
|
|
28
27
|
const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
|
|
29
|
-
const {
|
|
30
|
-
const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps()
|
|
28
|
+
const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
|
|
31
29
|
|
|
32
30
|
const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
|
|
33
31
|
|
|
@@ -44,130 +42,6 @@ export default defineComponent({
|
|
|
44
42
|
headerColumn.value = isGroup ? convertHeaderColumnToRows(props.tableGroupColumn) : []
|
|
45
43
|
}
|
|
46
44
|
|
|
47
|
-
const resizeMousedownEvent = (evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) => {
|
|
48
|
-
const { column } = params
|
|
49
|
-
const { fixedType } = props
|
|
50
|
-
const { elemStore, visibleColumn } = tableInternalData
|
|
51
|
-
const resizableOpts = computeResizableOpts.value
|
|
52
|
-
const tableEl = tableRefElem.value
|
|
53
|
-
const leftContainerElem = refLeftContainer.value
|
|
54
|
-
const rightContainerElem = refRightContainer.value
|
|
55
|
-
const resizeBarElem = refCellResizeBar.value
|
|
56
|
-
const resizeTipElem = refCellResizeTip.value
|
|
57
|
-
const { clientX: dragClientX } = evnt
|
|
58
|
-
const wrapperElem = refElem.value
|
|
59
|
-
const dragBtnElem = evnt.target as HTMLDivElement
|
|
60
|
-
const cell = dragBtnElem.parentNode as HTMLTableCellElement
|
|
61
|
-
const cellParams = Object.assign(params, { cell })
|
|
62
|
-
let dragLeft = 0
|
|
63
|
-
const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
|
|
64
|
-
if (!bodyScrollElem) {
|
|
65
|
-
return
|
|
66
|
-
}
|
|
67
|
-
const pos = getOffsetPos(dragBtnElem, wrapperElem)
|
|
68
|
-
const dragBtnWidth = dragBtnElem.clientWidth
|
|
69
|
-
const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2)
|
|
70
|
-
const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth // 列之间的最小间距
|
|
71
|
-
let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval
|
|
72
|
-
let dragPosLeft = pos.left + dragBtnOffsetWidth
|
|
73
|
-
const domMousemove = document.onmousemove
|
|
74
|
-
const domMouseup = document.onmouseup
|
|
75
|
-
const isLeftFixed = fixedType === 'left'
|
|
76
|
-
const isRightFixed = fixedType === 'right'
|
|
77
|
-
|
|
78
|
-
// 计算左右侧固定列偏移量
|
|
79
|
-
let fixedOffsetWidth = 0
|
|
80
|
-
if (isLeftFixed || isRightFixed) {
|
|
81
|
-
const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling'
|
|
82
|
-
let tempCellElem = cell[siblingProp] as HTMLTableCellElement
|
|
83
|
-
while (tempCellElem) {
|
|
84
|
-
if (hasClass(tempCellElem, 'fixed--hidden')) {
|
|
85
|
-
break
|
|
86
|
-
} else if (!hasClass(tempCellElem, 'col--group')) {
|
|
87
|
-
fixedOffsetWidth += tempCellElem.offsetWidth
|
|
88
|
-
}
|
|
89
|
-
tempCellElem = tempCellElem[siblingProp] as HTMLTableCellElement
|
|
90
|
-
}
|
|
91
|
-
if (isRightFixed && rightContainerElem) {
|
|
92
|
-
dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// 处理拖动事件
|
|
97
|
-
const updateEvent = function (evnt: MouseEvent) {
|
|
98
|
-
evnt.stopPropagation()
|
|
99
|
-
evnt.preventDefault()
|
|
100
|
-
const offsetX = evnt.clientX - dragClientX
|
|
101
|
-
let left = dragPosLeft + offsetX
|
|
102
|
-
const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft
|
|
103
|
-
if (isLeftFixed) {
|
|
104
|
-
// 左固定列(不允许超过右侧固定列、不允许超过右边距)
|
|
105
|
-
left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval)
|
|
106
|
-
} else if (isRightFixed) {
|
|
107
|
-
// 右侧固定列(不允许超过左侧固定列、不允许超过左边距)
|
|
108
|
-
dragMinLeft = (leftContainerElem ? leftContainerElem.clientWidth : 0) + fixedOffsetWidth + minInterval
|
|
109
|
-
left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval)
|
|
110
|
-
} else {
|
|
111
|
-
dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft)
|
|
112
|
-
// left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
|
|
113
|
-
}
|
|
114
|
-
dragLeft = Math.max(left, dragMinLeft)
|
|
115
|
-
const resizeBarLeft = dragLeft - scrollLeft
|
|
116
|
-
resizeBarElem.style.left = `${resizeBarLeft}px`
|
|
117
|
-
if (resizableOpts.showDragTip && resizeTipElem) {
|
|
118
|
-
const tableWidth = tableEl.clientWidth
|
|
119
|
-
const wrapperRect = wrapperElem.getBoundingClientRect()
|
|
120
|
-
const resizeBarWidth = resizeBarElem.clientWidth
|
|
121
|
-
const resizeTipWidth = resizeTipElem.clientWidth
|
|
122
|
-
const resizeTipHeight = resizeTipElem.clientHeight
|
|
123
|
-
let resizeTipLeft = -resizeTipWidth
|
|
124
|
-
if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
|
|
125
|
-
resizeTipLeft = resizeTipWidth + resizeBarWidth - resizeBarLeft
|
|
126
|
-
} else if (resizeBarLeft > tableWidth) {
|
|
127
|
-
resizeTipLeft += tableWidth - resizeBarLeft
|
|
128
|
-
}
|
|
129
|
-
resizeTipElem.style.left = `${resizeTipLeft}px`
|
|
130
|
-
resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
|
|
131
|
-
resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)])
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
tableReactData._isResize = true
|
|
136
|
-
addClass(tableEl, 'drag--resize')
|
|
137
|
-
resizeBarElem.style.display = 'block'
|
|
138
|
-
document.onmousemove = updateEvent
|
|
139
|
-
document.onmouseup = function (evnt) {
|
|
140
|
-
document.onmousemove = domMousemove
|
|
141
|
-
document.onmouseup = domMouseup
|
|
142
|
-
const resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
|
|
143
|
-
column.resizeWidth = resizeWidth
|
|
144
|
-
if (resizableOpts.dragMode === 'fixed') {
|
|
145
|
-
visibleColumn.forEach(item => {
|
|
146
|
-
if (item.id !== column.id) {
|
|
147
|
-
if (!item.resizeWidth) {
|
|
148
|
-
item.resizeWidth = item.renderWidth
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
})
|
|
152
|
-
}
|
|
153
|
-
resizeBarElem.style.display = 'none'
|
|
154
|
-
tableReactData._isResize = false
|
|
155
|
-
tableInternalData._lastResizeTime = Date.now()
|
|
156
|
-
$xeTable.analyColumnWidth()
|
|
157
|
-
$xeTable.recalculate(true).then(() => {
|
|
158
|
-
$xeTable.saveCustomStore('update:visible')
|
|
159
|
-
$xeTable.updateCellAreas()
|
|
160
|
-
$xeTable.dispatchEvent('resizable-change', { ...params, resizeWidth }, evnt)
|
|
161
|
-
setTimeout(() => $xeTable.recalculate(true), 300)
|
|
162
|
-
})
|
|
163
|
-
removeClass(tableEl, 'drag--resize')
|
|
164
|
-
}
|
|
165
|
-
updateEvent(evnt)
|
|
166
|
-
if ($xeTable.closeMenu) {
|
|
167
|
-
$xeTable.closeMenu()
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
45
|
const renderRows = (isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
|
|
172
46
|
const { fixedType } = props
|
|
173
47
|
const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
|
|
@@ -175,6 +49,10 @@ export default defineComponent({
|
|
|
175
49
|
const { scrollXStore } = tableInternalData
|
|
176
50
|
const columnOpts = computeColumnOpts.value
|
|
177
51
|
const columnDragOpts = computeColumnDragOpts.value
|
|
52
|
+
const cellOpts = computeCellOpts.value
|
|
53
|
+
const defaultRowHeight = computeDefaultRowHeight.value
|
|
54
|
+
const headerCellOpts = computeHeaderCellOpts.value
|
|
55
|
+
const currCellHeight = getCellHeight(headerCellOpts.height || cellOpts.height) || defaultRowHeight
|
|
178
56
|
const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
|
|
179
57
|
return cols.map((column, $columnIndex) => {
|
|
180
58
|
const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
|
|
@@ -183,6 +61,7 @@ export default defineComponent({
|
|
|
183
61
|
const compConf = renderOpts ? renderer.get(renderOpts.name) : null
|
|
184
62
|
const isColGroup = column.children && column.children.length
|
|
185
63
|
const fixedHiddenColumn = fixedType ? (column.fixed !== fixedType && !isColGroup) : !!column.fixed && overflowX
|
|
64
|
+
const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
|
|
186
65
|
const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
|
|
187
66
|
const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
|
|
188
67
|
let showEllipsis = headOverflow === 'ellipsis'
|
|
@@ -197,7 +76,7 @@ export default defineComponent({
|
|
|
197
76
|
}
|
|
198
77
|
const columnIndex = $xeTable.getColumnIndex(column)
|
|
199
78
|
const _columnIndex = $xeTable.getVTColumnIndex(column)
|
|
200
|
-
const
|
|
79
|
+
const cellParams: VxeTableDefines.CellRenderHeaderParams & {
|
|
201
80
|
$table: VxeTableConstructor & VxeTablePrivateMethods
|
|
202
81
|
} = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
|
|
203
82
|
const thAttrs: Record<string, string | number | null> = {
|
|
@@ -206,8 +85,8 @@ export default defineComponent({
|
|
|
206
85
|
rowspan: column.rowSpan > 1 ? column.rowSpan : null
|
|
207
86
|
}
|
|
208
87
|
const thOns: any = {
|
|
209
|
-
onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt,
|
|
210
|
-
onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt,
|
|
88
|
+
onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
|
|
89
|
+
onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
|
|
211
90
|
}
|
|
212
91
|
// 横向虚拟滚动不支持动态行高
|
|
213
92
|
if (scrollXLoad && !hasEllipsis) {
|
|
@@ -216,11 +95,11 @@ export default defineComponent({
|
|
|
216
95
|
const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
|
|
217
96
|
let isDisabledDrag = false
|
|
218
97
|
if (isColDragCell) {
|
|
219
|
-
isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(
|
|
98
|
+
isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(cellParams))
|
|
220
99
|
}
|
|
221
100
|
// 按下事件处理
|
|
222
101
|
if (mouseConfig || isColDragCell) {
|
|
223
|
-
thOns.onMousedown = (evnt: MouseEvent) => $xeTable.triggerHeaderCellMousedownEvent(evnt,
|
|
102
|
+
thOns.onMousedown = (evnt: MouseEvent) => $xeTable.triggerHeaderCellMousedownEvent(evnt, cellParams)
|
|
224
103
|
}
|
|
225
104
|
// 拖拽列事件
|
|
226
105
|
if (columnOpts.drag) {
|
|
@@ -231,23 +110,33 @@ export default defineComponent({
|
|
|
231
110
|
thOns.onMouseup = $xeTable.handleHeaderCellDragMouseupEvent
|
|
232
111
|
}
|
|
233
112
|
}
|
|
113
|
+
const isLastColumn = $columnIndex === cols.length - 1
|
|
114
|
+
const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
|
|
234
115
|
const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
|
|
235
116
|
|
|
236
|
-
let
|
|
237
|
-
if (scrollXLoad && !
|
|
238
|
-
|
|
117
|
+
let isVNPreEmptyStatus = false
|
|
118
|
+
if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
|
|
119
|
+
isVNPreEmptyStatus = true
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
const tcStyle: Record<string, string> = {}
|
|
123
|
+
if (hasEllipsis) {
|
|
124
|
+
tcStyle.height = `${currCellHeight}px`
|
|
125
|
+
} else {
|
|
126
|
+
tcStyle.minHeight = `${currCellHeight}px`
|
|
239
127
|
}
|
|
240
128
|
|
|
241
129
|
return h('th', {
|
|
242
130
|
class: ['vxe-header--column', colid, {
|
|
243
131
|
[`col--${headAlign}`]: headAlign,
|
|
244
132
|
[`col--${type}`]: type,
|
|
245
|
-
'col--last':
|
|
133
|
+
'col--last': isLastColumn,
|
|
246
134
|
'col--fixed': column.fixed,
|
|
247
135
|
'col--group': isColGroup,
|
|
248
136
|
'col--ellipsis': hasEllipsis,
|
|
249
137
|
'fixed--width': !isAutoCellWidth,
|
|
250
138
|
'fixed--hidden': fixedHiddenColumn,
|
|
139
|
+
'is--padding': isPadding,
|
|
251
140
|
'is--sortable': column.sortable,
|
|
252
141
|
'col--filter': !!filters,
|
|
253
142
|
'is--filter-active': hasFilter,
|
|
@@ -255,10 +144,10 @@ export default defineComponent({
|
|
|
255
144
|
'is--drag-disabled': isDisabledDrag,
|
|
256
145
|
'col--current': currentColumn === column
|
|
257
146
|
},
|
|
258
|
-
headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(
|
|
259
|
-
headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(
|
|
147
|
+
headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
|
|
148
|
+
headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName) : ''
|
|
260
149
|
],
|
|
261
|
-
style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(
|
|
150
|
+
style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : null,
|
|
262
151
|
...thAttrs,
|
|
263
152
|
...thOns,
|
|
264
153
|
key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
|
|
@@ -268,20 +157,28 @@ export default defineComponent({
|
|
|
268
157
|
'c--title': showTitle,
|
|
269
158
|
'c--tooltip': showTooltip,
|
|
270
159
|
'c--ellipsis': showEllipsis
|
|
271
|
-
}]
|
|
272
|
-
|
|
160
|
+
}],
|
|
161
|
+
style: tcStyle
|
|
162
|
+
}, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn)
|
|
163
|
+
? []
|
|
164
|
+
: [
|
|
165
|
+
h('div', {
|
|
166
|
+
colid,
|
|
167
|
+
class: 'vxe-cell--wrapper'
|
|
168
|
+
}, column.renderHeader(cellParams))
|
|
169
|
+
]),
|
|
273
170
|
/**
|
|
274
171
|
* 列宽拖动
|
|
275
172
|
*/
|
|
276
|
-
!fixedHiddenColumn &&
|
|
173
|
+
!fixedHiddenColumn && showResizable
|
|
277
174
|
? h('div', {
|
|
278
|
-
class: ['vxe-resizable', {
|
|
175
|
+
class: ['vxe-cell--col-resizable', {
|
|
279
176
|
'is--line': !border || border === 'none'
|
|
280
177
|
}],
|
|
281
|
-
onMousedown: (evnt: MouseEvent) =>
|
|
282
|
-
onDblclick: (evnt: MouseEvent) => $xeTable.
|
|
178
|
+
onMousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
|
|
179
|
+
onDblclick: (evnt: MouseEvent) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
|
|
283
180
|
})
|
|
284
|
-
:
|
|
181
|
+
: renderEmptyElement($xeTable)
|
|
285
182
|
])
|
|
286
183
|
})
|
|
287
184
|
}
|
|
@@ -323,10 +220,11 @@ export default defineComponent({
|
|
|
323
220
|
|
|
324
221
|
const renderVN = () => {
|
|
325
222
|
const { fixedType, fixedColumn, tableColumn } = props
|
|
326
|
-
const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
|
|
223
|
+
const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
|
|
327
224
|
const { isGroup, scrollXLoad, scrollYLoad, dragCol } = tableReactData
|
|
328
225
|
const { visibleColumn, fullColumnIdData } = tableInternalData
|
|
329
226
|
|
|
227
|
+
const mouseOpts = computeMouseOpts.value
|
|
330
228
|
let renderHeaderList = headerColumn.value
|
|
331
229
|
let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
|
|
332
230
|
let isOptimizeMode = false
|
|
@@ -423,15 +321,32 @@ export default defineComponent({
|
|
|
423
321
|
h('thead', {
|
|
424
322
|
ref: refHeaderTHead
|
|
425
323
|
}, renderHeads(isGroup, isOptimizeMode, renderHeaderList))
|
|
426
|
-
])
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
324
|
+
]),
|
|
325
|
+
mouseConfig && mouseOpts.area
|
|
326
|
+
? h('div', {
|
|
327
|
+
class: 'vxe-table--cell-area'
|
|
328
|
+
}, [
|
|
329
|
+
h('span', {
|
|
330
|
+
class: 'vxe-table--cell-main-area'
|
|
331
|
+
}),
|
|
332
|
+
h('span', {
|
|
333
|
+
class: 'vxe-table--cell-copy-area'
|
|
334
|
+
}),
|
|
335
|
+
h('span', {
|
|
336
|
+
class: 'vxe-table--cell-extend-area'
|
|
337
|
+
}),
|
|
338
|
+
h('span', {
|
|
339
|
+
class: 'vxe-table--cell-multi-area'
|
|
340
|
+
}),
|
|
341
|
+
h('span', {
|
|
342
|
+
class: 'vxe-table--cell-active-area'
|
|
343
|
+
}),
|
|
344
|
+
h('span', {
|
|
345
|
+
class: 'vxe-table--cell-col-status-area'
|
|
346
|
+
})
|
|
347
|
+
])
|
|
348
|
+
: renderEmptyElement($xeTable)
|
|
349
|
+
])
|
|
435
350
|
])
|
|
436
351
|
}
|
|
437
352
|
|
|
@@ -34,10 +34,10 @@ export default {
|
|
|
34
34
|
type: [Boolean, String] as PropType<VxeTablePropTypes.Border>,
|
|
35
35
|
default: () => getConfig().table.border
|
|
36
36
|
},
|
|
37
|
-
//
|
|
37
|
+
// 已废弃,被 cell-config.padding 替换
|
|
38
38
|
padding: {
|
|
39
39
|
type: Boolean as PropType<VxeTablePropTypes.Padding>,
|
|
40
|
-
default:
|
|
40
|
+
default: null
|
|
41
41
|
},
|
|
42
42
|
// 是否圆角边框
|
|
43
43
|
round: {
|
|
@@ -86,13 +86,18 @@ export default {
|
|
|
86
86
|
type: Boolean as PropType<VxeTablePropTypes.HighlightHoverRow>,
|
|
87
87
|
default: () => getConfig().table.highlightHoverRow
|
|
88
88
|
},
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
/**
|
|
90
|
+
* (即将废弃)是否要高亮当前选中列
|
|
91
|
+
* @deprecated
|
|
92
|
+
*/
|
|
91
93
|
highlightCurrentColumn: {
|
|
92
94
|
type: Boolean as PropType<VxeTablePropTypes.HighlightCurrentColumn>,
|
|
93
95
|
default: () => getConfig().table.highlightCurrentColumn
|
|
94
96
|
},
|
|
95
|
-
|
|
97
|
+
/**
|
|
98
|
+
* (即将废弃)鼠标移到列是否要高亮显示
|
|
99
|
+
* @deprecated
|
|
100
|
+
*/
|
|
96
101
|
highlightHoverColumn: {
|
|
97
102
|
type: Boolean as PropType<VxeTablePropTypes.HighlightHoverColumn>,
|
|
98
103
|
default: () => getConfig().table.highlightHoverColumn
|
|
@@ -185,6 +190,10 @@ export default {
|
|
|
185
190
|
columnConfig: Object as PropType<VxeTablePropTypes.ColumnConfig>,
|
|
186
191
|
// 单元格配置信息
|
|
187
192
|
cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
|
|
193
|
+
// 表头单元格配置信息
|
|
194
|
+
headerCellConfig: Object as PropType<VxeTablePropTypes.HeaderCellConfig>,
|
|
195
|
+
// 表尾单元格配置信息
|
|
196
|
+
footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
|
|
188
197
|
// 行配置信息
|
|
189
198
|
rowConfig: Object as PropType<VxeTablePropTypes.RowConfig>,
|
|
190
199
|
// 已废弃,被 rowDragConfig 替换
|