Skip to content

Commit 7dd1aee

Browse files
xuliangzhanxuliangzhan
committed
releases 3.25.0
1 parent 9c74bcd commit 7dd1aee

10 files changed

Lines changed: 253 additions & 336 deletions

File tree

‎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": "3.25.0-beta.3",
3+
"version": "3.25.0",
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",
@@ -65,7 +65,7 @@
6565
"vue-i18n": "^8.15.1",
6666
"vue-router": "^3.5.1",
6767
"vue-template-compiler": "2.6.14",
68-
"vxe-pc-ui": "3.20.8"
68+
"vxe-pc-ui": "3.20.11"
6969
},
7070
"vetur": {
7171
"tags": "helper/vetur/tags.json",

‎packages/grid/src/grid.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { tableProps } from '../../table/src/props'
1010
import VxeTableComponent from '../../table'
1111
import VxeToolbarComponent from '../../toolbar'
1212

13-
import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
13+
import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, VxeComponentIsVScrollbar, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
1414
import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, GridInternalData, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, TableInternalData, VxeTableProps, VxeGridDefines } from '../../../types'
1515

1616
const { warnLog, errLog } = createComponentLog('grid')
@@ -139,6 +139,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
139139
computed: {
140140
...({} as {
141141
computeSize(): VxeComponentSizeType
142+
computeIsVScrollbar(): VxeComponentIsVScrollbar
142143
}),
143144
isRespMsg () {
144145
const $xeGrid = this

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
1717
const internalData = $xeTable as unknown as TableInternalData
1818
const $xeGGWrapper = $xeGrid || $xeGantt
1919

20-
const { filterStore } = reactData
20+
const { filterStore, scrollbarHeight } = reactData
2121
const { elemStore } = internalData
2222
const { column, targetEl } = filterStore
2323
if (!column) {
@@ -39,8 +39,6 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
3939
if (!filterWrapperElem) {
4040
return $xeTable.$nextTick()
4141
}
42-
const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
43-
const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
4442

4543
/**
4644
* 是否显示筛选按钮图标
@@ -80,9 +78,9 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
8078
} else {
8179
const filterWidth = filterWrapperElem.offsetWidth
8280
const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
83-
maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
8481
left = btnRect.left - tableRect.left - centerWidth
8582
top = btnRect.top - tableRect.top + currEl.clientHeight
83+
maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight)
8684
if (left < 1) {
8785
left = 1
8886
} else if (left > (tableEl.clientWidth - filterWidth - 1)) {
@@ -104,7 +102,6 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
104102
if (zIndex) {
105103
panelStyle.zIndex = zIndex
106104
}
107-
filterStore.style = panelStyle
108105
// 筛选面板是自适应表格高度
109106
if (compConf ? !compConf.tableFilterAutoHeight : false) {
110107
maxHeight = 0
@@ -113,8 +110,8 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
113110
maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
114111
}
115112
}
116-
// 判断面板不能大于表格高度
117-
filterStore.maxHeight = maxHeight
113+
panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none'
114+
filterStore.style = panelStyle
118115
}
119116
handleStyle()
120117
return $xeTable.$nextTick().then(() => {

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

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { CreateElement, PropType } from 'vue'
22
import { defineVxeComponent } from '../../../ui/src/comp'
33
import { VxeUI } from '../../../ui'
44
import { formatText, isEnableConf } from '../../../ui/src/utils'
5-
import { getPropClass, toCssUnit } from '../../../ui/src/dom'
5+
import { getPropClass } from '../../../ui/src/dom'
66
import { getSlotVNs } from '../../../ui/src/vn'
77
import { createComponentLog } from '../../../ui/src/log'
88

@@ -142,16 +142,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
142142
*************************/
143143

144144
renderOptions (h: CreateElement, filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) {
145+
const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
146+
145147
const $xeFilterPanel = this
146148
const props = $xeFilterPanel
147149
const $xeTable = $xeFilterPanel.$xeTable
148150
const tableInternalData = $xeTable as unknown as TableInternalData
149151

150152
const { filterStore } = props
151-
const { column, maxHeight } = filterStore
153+
const { column } = filterStore
152154
if (!column) {
153155
return []
154156
}
157+
const filterOpts = $xeTable.computeFilterOpts
158+
const { useScrollbar } = filterOpts
155159
const { filterMultiple, filters, slots } = column
156160
const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
157161
const filterSlot = slots ? slots.filter : null
@@ -160,33 +164,52 @@ export default /* define-vxe-component start */ defineVxeComponent({
160164
if (filterSlot) {
161165
return [
162166
h('div', {
163-
class: 'vxe-table--filter-template',
164-
style: maxHeight
165-
? {
166-
maxHeight: toCssUnit(maxHeight)
167-
}
168-
: {}
167+
class: 'vxe-table--filter-template'
169168
}, $xeTable.callSlot(filterSlot, params, h))
170169
]
171170
} else if (filterRender && rtFilter) {
172171
return [
173172
h('div', {
174-
class: 'vxe-table--filter-template',
175-
style: maxHeight
176-
? {
177-
maxHeight: toCssUnit(maxHeight)
178-
}
179-
: {}
173+
class: 'vxe-table--filter-template'
180174
}, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
181175
]
182176
}
183177
const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked)
184178
const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate
179+
180+
const optVNs = filterOptions.map((item: any) => {
181+
const isChecked = item._checked
182+
const isIndeterminate = false
183+
return h('div', {
184+
class: ['vxe-table--filter-option', {
185+
'is--checked': isChecked
186+
}],
187+
attrs: {
188+
title: item.label
189+
},
190+
on: {
191+
click: (evnt: MouseEvent) => {
192+
($xeFilterPanel as any).changeOption(evnt, !item._checked, item)
193+
}
194+
}
195+
}, (filterMultiple
196+
? [
197+
h('span', {
198+
class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
199+
})
200+
]
201+
: []).concat([
202+
h('span', {
203+
class: 'vxe-checkbox--label'
204+
}, formatText(item.label, 1))
205+
]))
206+
})
207+
185208
return [
186-
h('ul', {
209+
h('div', {
187210
class: 'vxe-table--filter-header'
188211
}, [
189-
h('li', {
212+
h('div', {
190213
class: ['vxe-table--filter-option', {
191214
'is--checked': isAllChecked,
192215
'is--indeterminate': isAllIndeterminate
@@ -211,40 +234,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
211234
}, getI18n('vxe.table.allFilter'))
212235
]))
213236
]),
214-
h('ul', {
215-
class: 'vxe-table--filter-body',
216-
style: maxHeight
217-
? {
218-
maxHeight: toCssUnit(maxHeight)
219-
}
220-
: {}
221-
}, filterOptions.map((item: any) => {
222-
const isChecked = item._checked
223-
const isIndeterminate = false
224-
return h('li', {
225-
class: ['vxe-table--filter-option', {
226-
'is--checked': isChecked
227-
}],
228-
attrs: {
229-
title: item.label
237+
useScrollbar
238+
? h(VxeUIScrollbarComponent, {
239+
class: 'vxe-table--scrollbar-filter-body',
240+
props: {
241+
viewClassName: 'vxe-table--scrollbar-filter-body-view'
230242
},
231-
on: {
232-
click: (evnt: MouseEvent) => {
233-
($xeFilterPanel as any).changeOption(evnt, !item._checked, item)
234-
}
243+
scopedSlots: {
244+
default: () => optVNs
235245
}
236-
}, (filterMultiple
237-
? [
238-
h('span', {
239-
class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
240-
})
241-
]
242-
: []).concat([
243-
h('span', {
244-
class: 'vxe-checkbox--label'
245-
}, formatText(item.label, 1))
246-
]))
247-
}))
246+
})
247+
: h('div', {
248+
class: 'vxe-table--filter-body'
249+
}, optVNs)
248250
]
249251
},
250252
renderFooter (h: CreateElement) {

0 commit comments

Comments
 (0)