dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8472 from dataease/pr@dev@perf_antv_table_scroll

Browse Source 
perf(视图): 优化 AntV 表格滚动条件，避免不必要的滚动
This commit is contained in:
wisonic-s 2024-03-13 15:06:12 +08:00 committed by GitHub
commit eb02184a0a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -527,7 +527,7 @@ export default {
clearTimeout(this.scrollTimer) clearTimeout(this.scrollTimer)
const customAttr = JSON.parse(this.chart.customAttr) const customAttr = JSON.parse(this.chart.customAttr)
const senior = JSON.parse(this.chart.senior) const senior = JSON.parse(this.chart.senior)
if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) { if (senior?.scrollCfg?.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) {
// 防止多次渲染 // 防止多次渲染
this.myChart.facet.timer?.stop() this.myChart.facet.timer?.stop()
if (this.myChart.store.get('scrollY') !== 0) { if (this.myChart.store.get('scrollY') !== 0) {
@ -536,11 +536,19 @@ export default {
} }
// 平滑滚动，兼容原有的滚动速率设置 // 平滑滚动，兼容原有的滚动速率设置
// 假设原设定为 2 行间隔 2 秒，换算公式为: 滚动到底部的时间 = 未展示部分行数 / 2行 * 2秒 // 假设原设定为 2 行间隔 2 秒，换算公式为: 滚动到底部的时间 = 未展示部分行数 / 2行 * 2秒
const offsetHeight = document.getElementById(this.chartId).offsetHeight
// 没显示就不滚了
if (!offsetHeight) {
return
}
const rowHeight = customAttr.size.tableItemHeight const rowHeight = customAttr.size.tableItemHeight
const headerHeight = customAttr.size.tableTitleHeight const headerHeight = customAttr.size.tableTitleHeight
const scrollBarSize = this.myChart.theme.scrollBar.size const scrollBarSize = this.myChart.theme.scrollBar.size
const offsetHeight = document.getElementById(this.chartId).offsetHeight
const scrollHeight = rowHeight * this.chart.data.tableRow.length + headerHeight - offsetHeight + scrollBarSize const scrollHeight = rowHeight * this.chart.data.tableRow.length + headerHeight - offsetHeight + scrollBarSize
// 显示内容没撑满
if (scrollHeight < scrollBarSize) {
return
}
const viewHeight = offsetHeight - headerHeight - scrollBarSize const viewHeight = offsetHeight - headerHeight - scrollBarSize
const scrollViewCount = this.chart.data.tableRow.length - viewHeight / rowHeight const scrollViewCount = this.chart.data.tableRow.length - viewHeight / rowHeight
const duration = scrollViewCount / senior.scrollCfg.row * senior.scrollCfg.interval const duration = scrollViewCount / senior.scrollCfg.row * senior.scrollCfg.interval