Skip to content

Commit 7ae2726

Browse files
zzcrzzcr
committed
fix(grid): 使用gpu加速优化虚拟滚动性能，修复筛选面板单选框无法选中问题
1 parent 442a6e9 commit 7ae2726

File tree

5 files changed

+239
-87
lines changed

5 files changed

+239
-87
lines changed

‎packages/vue/src/grid/src/body/src/body.tsx

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,23 @@
2424
*/
2525
import { isFunction, find } from '@opentiny/vue-renderless/grid/static/'
2626
import { isNull } from '@opentiny/vue-renderless/common/type'
27-
import { updateCellTitle, emitEvent, getClass, getFuncText, getRowid, formatText } from '@opentiny/vue-renderless/grid/utils'
27+
import {
28+
updateCellTitle,
29+
emitEvent,
30+
getClass,
31+
getFuncText,
32+
getRowid,
33+
formatText
34+
} from '@opentiny/vue-renderless/grid/utils'
2835
import { getCellLabel } from '../../tools'
2936
import GlobalConfig from '../../config'
3037
import { iconChevronRight, iconChevronDown } from '@opentiny/vue-icon'
3138
import { h, hooks, $prefix } from '@opentiny/vue-common'
3239
import { getTreeChildrenKey, getTreeShowKey, getTableCellKey } from '../../table/src/strategy'
3340

3441
// 滚动、拖动过程中不需要触发
35-
const isOperateMouse = ($table) => $table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
42+
const isOperateMouse = ($table) =>
43+
$table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
3644

3745
// 解决静态扫描驼峰变量问题
3846
const classMap = {
@@ -343,7 +351,17 @@ const setColumnEvents = (args1) => {
343351
// 双击事件处理
344352
addListenerDblclick({ $table, evntParams, tableListeners, tdOns, triggerDblclick })
345353

346-
return { commonParams, args, cellOverflow, showTitle, showTooltip, showEllipsis, hasEllipsis, tdOns, fixedHiddenColumn }
354+
return {
355+
commonParams,
356+
args,
357+
cellOverflow,
358+
showTitle,
359+
showTooltip,
360+
showEllipsis,
361+
hasEllipsis,
362+
tdOns,
363+
fixedHiddenColumn
364+
}
347365
}
348366

349367
/**
@@ -364,9 +382,19 @@ function renderColumn(args1) {
364382
let hasDefaultTip = editRules && (message === 'default' ? height || tableData.length > 1 : message === 'inline')
365383
let { align, className, editor, showTip } = column
366384
let cellAlign = align || allAlign
367-
let columnActived = editConfig && editor && actived.row === row && (actived.column === column || editConfig.mode === 'row')
368-
369-
let { commonParams, args, showTitle, showTooltip, showEllipsis, tdOns = {}, hasEllipsis, fixedHiddenColumn } = setColumnEvents(args1)
385+
let columnActived =
386+
editConfig && editor && actived.row === row && (actived.column === column || editConfig.mode === 'row')
387+
388+
let {
389+
commonParams,
390+
args,
391+
showTitle,
392+
showTooltip,
393+
showEllipsis,
394+
tdOns = {},
395+
hasEllipsis,
396+
fixedHiddenColumn
397+
} = setColumnEvents(args1)
370398
let params = { $seq, data: tableData, ...commonParams }
371399
// 索引列、选择列如果不配置对齐方式则默认为居中对齐
372400
cellAlign = modifyCellAlign({ cellAlign, column })
@@ -409,7 +437,11 @@ function renderRowGroupTds(args) {
409437
expand: !group.fold
410438
})
411439
} else {
412-
groupTitleVNode = [<span class="row-group-title">{header}</span>, `:${value}`, <span class="tiny-badge">{group.children.length}</span>]
440+
groupTitleVNode = [
441+
<span class="row-group-title">{header}</span>,
442+
`:${value}`,
443+
<span class="tiny-badge">{group.children.length}</span>
444+
]
413445
}
414446
tds.push(
415447
<td colspan={tableColumn.length - index} class="tiny-grid-body__column">
@@ -469,8 +501,7 @@ function renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows,
469501
}
470502
})
471503
}
472-
}}
473-
>
504+
}}>
474505
{tds}
475506
</tr>
476507
)
@@ -501,7 +532,11 @@ function renderRow(args) {
501532
'tiny-hide': groupFolds.includes(row),
502533
[classMap.rowActived]: rowActived
503534
},
504-
rowClassName ? (isFunction(rowClassName) ? rowClassName({ $table, $seq, seq, fixedType, rowLevel, row, rowIndex, $rowIndex }) : rowClassName) : ''
535+
rowClassName
536+
? isFunction(rowClassName)
537+
? rowClassName({ $table, $seq, seq, fixedType, rowLevel, row, rowIndex, $rowIndex })
538+
: rowClassName
539+
: ''
505540
],
506541
attrs: {
507542
'data-rowid': rowid
@@ -522,7 +557,8 @@ function renderRow(args) {
522557
}
523558

524559
function renderRowAfter({ $table, h, row, rowIndex, rows, tableData }) {
525-
typeof $table.renderRowAfter === 'function' && $table.renderRowAfter({ rows, row, data: tableData, rowIndex, renderColumn }, h)
560+
typeof $table.renderRowAfter === 'function' &&
561+
$table.renderRowAfter({ rows, row, data: tableData, rowIndex, renderColumn }, h)
526562
}
527563

528564
function renderRowExpanded(args) {
@@ -578,13 +614,15 @@ function renderRowTree(args, renderRows) {
578614
let { rows, seq, seqCount, tableColumn, treeConfig, treeExpandeds } = args
579615
let { scrollYLoad } = $table
580616

617+
// 如果没有树表配置或者树表展开行数为零，则直接跳过
581618
if (!treeConfig || !treeExpandeds.length) {
582619
return
583620
}
584621

585622
let childrenKey = getTreeChildrenKey({ scrollYLoad, treeConfig })
586623
let rowChildren = row[childrenKey]
587624

625+
// 若果当前行不是展开行或者子节点个数为零，则跳过
588626
if (!rowChildren || !rowChildren.length || !~treeExpandeds.indexOf(row)) {
589627
return
590628
}
@@ -630,20 +668,27 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, fixedType, tableData, tabl
630668
// 事件绑定
631669
addRowListenerMouseenter({ $table, highlightHoverRow, row, rowIndex, trOn })
632670
let rowid = getRowid($table, row)
671+
672+
// 如果有表格分组信息，则执行分组逻辑
633673
renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, tableColumn })
634674
let args = { $rowIndex, $seq, $table, _vm, editStore, fixedType, groupFolds, h, row, rowActived }
635675
Object.assign(args, { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows, selection, seq })
636676
Object.assign(args, { tableColumn, trOn, treeConfig })
637677

678+
// 输入表格行列的vnode节点列表
638679
renderRow(args)
680+
681+
// 允许用户自定义表格行渲染后的逻辑
639682
renderRowAfter({ $table, h, row, rowIndex, rows, tableData })
640683
args = { $table, expandMethod, expandeds, fixedType, h, row, rowIndex, rowLevel }
641684
Object.assign(args, { rowid, rows, seq, tableColumn, trOn, treeConfig })
642-
// 如果行被展开了
685+
686+
// 如果行被展开了，这里渲染展开行的vnode节点
643687
renderRowExpanded(args)
644688
args = { $seq, $table, _vm, fixedType, h, row, rowLevel, rows }
645689
Object.assign(args, { seq, seqCount, tableColumn, treeConfig, treeExpandeds })
646-
// 如果是树形表格
690+
691+
// 如果是树形表格，则会递归渲染已展开行的子节点
647692
renderRowTree(args, renderRows)
648693
})
649694

@@ -812,13 +857,19 @@ function renderTable({ $table, _vm, clearHoverRow, fixedType, tableColumn, table
812857
tableColumn.map((column, columnIndex) => h('col', { attrs: { name: column.id }, key: columnIndex }))
813858
),
814859
// 内容
815-
h('tbody', { ref: 'tbody', on: { mouseleave: clearHoverRow } }, renderRows({ h, _vm, $table, $seq: '', rowLevel: 0, fixedType, tableData, tableColumn }))
860+
h(
861+
'tbody',
862+
{ ref: 'tbody', on: { mouseleave: clearHoverRow } },
863+
renderRows({ h, _vm, $table, $seq: '', rowLevel: 0, fixedType, tableData, tableColumn })
864+
)
816865
]
817866
)
818867
}
819868

820869
function renderYSpace({ scrollLoad }) {
821-
return h('div', { class: 'tiny-grid-body__y-space visual', ref: 'ySpace' }, [scrollLoad ? h('div', { class: 'tiny-grid-body__y-scrollbar' }) : [null]])
870+
return h('div', { class: 'tiny-grid-body__y-space visual', ref: 'ySpace' }, [
871+
scrollLoad ? h('div', { class: 'tiny-grid-body__y-scrollbar' }) : [null]
872+
])
822873
}
823874

824875
function renderXSpace({ fixedType }) {
@@ -877,7 +928,11 @@ export default {
877928
'div',
878929
{
879930
ref: 'body',
880-
class: ['tiny-grid__body-wrapper', fixedType ? `fixed-${fixedType}__wrapper` : 'body__wrapper', { [classMap.isScrollload]: scrollLoad }]
931+
class: [
932+
'tiny-grid__body-wrapper',
933+
fixedType ? `fixed-${fixedType}__wrapper` : 'body__wrapper',
934+
{ [classMap.isScrollload]: scrollLoad }
935+
]
881936
},
882937
[
883938
renderXSpace({ fixedType }),

‎packages/vue/src/grid/src/filter/src/panel.tsx

Lines changed: 27 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,13 @@ import { iconCheck, iconCheckedSur, iconDefinedFiltration, iconLeftWard, iconDel
3434
import debounce from '@opentiny/vue-renderless/common/deps/debounce'
3535

3636
function renderAdvancePanelAdvList({ _vm }) {
37-
return _vm.showAdvList && _vm.showAdvItems
38-
? (
37+
return _vm.showAdvList && _vm.showAdvItems ? (
3938
<ul class="adv-list" ref="advlist">
4039
{['等于', '不等于', '包含', '不包含', '开头是', '结尾是'].map((item) => (
4140
<li class="adv-item">{item}</li>
4241
))}
4342
</ul>
44-
)
45-
: null
43+
) : null
4644
}
4745

4846
function renderAdvancePanelButtons({ _vm }) {
@@ -79,8 +77,7 @@ function renderAdvancePanelAdvHeader({ _vm, ArrowLeft }) {
7977
_vm.showAdvance = false
8078
_vm.showAdvItems = false
8179
_vm.updatePanel()
82-
}}
83-
>
80+
}}>
8481
<ArrowLeft></ArrowLeft>自定义筛选方式
8582
</div>
8683
)
@@ -174,8 +171,7 @@ function renderEnumableOptions({ iconRender, _vm, filterStore }) {
174171
// 多选
175172
item.checked = !item.checked
176173
}
177-
}}
178-
>
174+
}}>
179175
{filterStore.multi ? iconRender(item.checked, index) : null}
180176
<a title={item.label}> {item.label} </a>
181177
</li>
@@ -214,7 +210,13 @@ export default {
214210
const { filterStore, $grid, optimizeOpts } = this
215211
let { args, column, options } = filterStore
216212

217-
const quickFilter = [this.renderInput(), this.renderEnumable(), this.renderDefault(), this.renderExtends(), this.renderBase()]
213+
const quickFilter = [
214+
this.renderInput(),
215+
this.renderEnumable(),
216+
this.renderDefault(),
217+
this.renderExtends(),
218+
this.renderBase()
219+
]
218220

219221
const map = {
220222
filterActive: 'filter__active'
@@ -231,10 +233,8 @@ export default {
231233
[map.filterActive]: filterStore.visible
232234
}
233235
]}
234-
style={filterStore.style}
235-
>
236-
{filterStore.visible
237-
? (
236+
style={filterStore.style}>
237+
{filterStore.visible ? (
238238
<div class={['tiny-grid__filter-body', { 'show-addvance': this.showAdvance }]}>
239239
{column.slots && column.slots.filter
240240
? column.slots.filter({
@@ -245,8 +245,7 @@ export default {
245245
})
246246
: quickFilter}
247247
</div>
248-
)
249-
: null}
248+
) : null}
250249
</div>
251250
)
252251
},
@@ -317,16 +316,14 @@ export default {
317316
class={['tiny-grid__filter-option', { active: condition.empty === true }]}
318317
onClick={() => {
319318
this.filterNull(true)
320-
}}
321-
>
319+
}}>
322320
<a class="item-content">{this.i18n('ui.grid.filter.empty')}</a>
323321
</li>
324322
<li
325323
class={['tiny-grid__filter-option', { active: condition.empty === false }]}
326324
onClick={() => {
327325
this.filterNull(false)
328-
}}
329-
>
326+
}}>
330327
<a class="item-content">{this.i18n('ui.grid.filter.unempty')}</a>
331328
</li>
332329
</ul>
@@ -346,8 +343,7 @@ export default {
346343
class="tiny-grid__filter-option"
347344
onClick={() => {
348345
this.filterExtends(item)
349-
}}
350-
>
346+
}}>
351347
<a class="item-content">{item.label}</a>
352348
</li>
353349
))}
@@ -371,8 +367,7 @@ export default {
371367
this.showAdvance = true
372368
this.updatePanel()
373369
}}
374-
class="item-content"
375-
>
370+
class="item-content">
376371
高级筛选
377372
</a>
378373
</li>
@@ -421,9 +416,7 @@ export default {
421416

422417
return (
423418
<ul class="tiny-grid__filter-panel">
424-
{isAddbyProgram
425-
? null
426-
: (
419+
{isAddbyProgram ? null : (
427420
<li class="tiny-grid__filter-option filter-option__radios">
428421
{inputRelations.map(({ label, value, method }) => (
429422
<Radio
@@ -436,13 +429,12 @@ export default {
436429
function () {
437430
return true
438431
}
439-
}}
440-
>
432+
}}>
441433
{label}
442434
</Radio>
443435
))}
444436
</li>
445-
)}
437+
)}
446438
<li class="filter-option__input">{h(InputComponent, inputProps)}</li>
447439
<li class="tiny-grid__filter-option filter-option__btns">
448440
<Button type="primary" onClick={this.filterInput}>
@@ -473,24 +465,23 @@ export default {
473465
return (
474466
<div class="tiny-grid__filter-panel filter-panel__enum">
475467
<ul class="tiny-grid__filter-options">
476-
{!filterStore.options.length ? renderEnumableEmpty({ _vm: this }) : renderEnumableOptions({ iconRender, _vm: this, filterStore })}
468+
{!filterStore.options.length
469+
? renderEnumableEmpty({ _vm: this })
470+
: renderEnumableOptions({ iconRender, _vm: this, filterStore })}
477471
</ul>
478-
{filterStore.multi
479-
? (
472+
{filterStore.multi ? (
480473
<div class="tiny-grid__filter-option filter-option__btns">
481474
<Button type="primary" onClick={this.filterEnum}>
482475
{this.i18n('ui.base.confirm')}
483476
</Button>
484477
<Button
485478
onClick={() => {
486479
filterStore.visible = false
487-
}}
488-
>
480+
}}>
489481
{this.i18n('ui.base.cancel')}
490482
</Button>
491483
</div>
492-
)
493-
: null}
484+
) : null}
494485
</div>
495486
)
496487
},

‎packages/vue/src/grid/src/radio/src/radio.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { h, $prefix } from '@opentiny/vue-common'
2626

2727
export default {
2828
name: $prefix + 'GridRadio',
29+
emits: ['update:modelValue', 'change'],
2930
props: {
3031
modelValue: [String, Number],
3132
label: [String, Number],

0 commit comments

Comments
 (0)