@@ -26,7 +17,26 @@ export default {
TinyGridColumn: GridColumn
},
data() {
- return {}
+ return {
+ optimizationData: {
+ animat: false,
+ delayHover: 1000,
+ scrollX: {
+ gt: 100, // 指定大于多少范围时自动启动虚拟滚动（启用 X 虚拟滚动，必须固定所有列宽，否则无法兼容）默认100
+ oSize: 2, // 当剩余数据少于指定范围时触发重新渲染 默认自动计算
+ rSize: 10, // 每次渲染条数 默认自动计算
+ vSize: 10 // 指定可视区域条数
+ },
+ scrollY: {
+ gt: 20, // 指定大于多少范围时自动启动虚拟滚动（启用 Y 虚拟滚动，必须固定所有行高，否则无法兼容）默认500
+ oSize: 2, // 当剩余数据少于指定范围时触发重新渲染 默认自动计算
+ rSize: 10, // 每次渲染条数 默认自动计算
+ vSize: 10, // 指定可视区域条数 默认自动计算
+ rHeight: 50, // 指定行高 默认自动计算
+ adaptive: true // 自动适配最优的渲染方式 默认true
+ }
+ }
+ }
},
created() {
this.mockData()
diff --git a/examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization-composition-api.vue b/examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization-composition-api.vue
deleted file mode 100644
index 8e81f9b85..000000000
--- a/examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization-composition-api.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization.vue b/examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization.vue
deleted file mode 100644
index dd95dd837..000000000
--- a/examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.cn.md
deleted file mode 100644
index 50af58c04..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.js b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.js
deleted file mode 100644
index 920c1d847..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
- column: '1',
- owner: '',
- demos: [
- {
- 'demoId': 'tiny-first-menu-grid-optimization',
- 'name': { 'zh-CN': '优化配置项', 'en-US': 'Optimized Configuration Items' },
- 'desc': {
- 'zh-CN':
- 'optimization(object) 配置说明
\n
| animat(boolean) | 表格动画效果开关（关闭后视觉效果更快）默认为 true |\n| delayHover(number) | 当表格发生拖动、滚动...等行为时，至少多少毫秒之后才允许触发 hover 事件 默认 250ms |\n| scrollX(object) | 横向 X 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 100 } |\n| scrollY(object) | 纵向 Y 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 500 } |
\n
optimization(object) Configuration Description
\n
| animat(boolean) | Table animation effect switch. The default value is true. |\n| delayHover(number) | When the table is dragged or scrolled, Minimum milliseconds after which the hover event can be triggered. The default value is 250 ms. |\n| scrollX(object) | Horizontal X virtual scrolling configuration (for manual optimization in special scenarios). Example: {gt: 100} |\n| scrollY(object) | Vertical Y virtual scrolling configuration (for manual optimization in special scenarios) Example: {gt: 500} |
\n
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.json.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.json.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js b/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js
index 477d7d49c..ea8351d1f 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-scroll-paging',
+ 'demoId': 'large-data-scroll-paging',
'name': { 'zh-CN': '滚动分页', 'en-US': 'Scroll Pagination' },
'desc': {
'zh-CN':
@@ -11,10 +11,10 @@ export default {
'en-US':
'Scrolling pagination configuration procedure:\n1. Set the table attribute fetch-data to enable the service request. \n2. Set scroll-load to enable scrolling.
\n'
},
- 'codeFiles': ['tiny-first-menu/scroll-paging.vue']
+ 'codeFiles': ['large-data/scroll-paging.vue']
},
{
- 'demoId': 'tiny-first-menu-virtual-rolling',
+ 'demoId': 'large-data-virtual-rolling',
'name': { 'zh-CN': '虚拟滚动', 'en-US': 'Virtual Scrolling' },
'desc': {
'zh-CN':
@@ -22,10 +22,10 @@ export default {
'en-US':
'Virtual scrolling configuration procedure:\n1. Set height to a fixed height for table attributes. \n2. Set optimization to enable virtual scrolling.
\noptimization(object) configuration description:
\n
| delayHover(number) | (ms) after which the hover event can be triggered when a table is dragged or scrolled. The default value is 250 ms. |\n| scrollX(object) | Horizontal X virtual scrolling configuration (for manual optimization in special scenarios) Example: {gt: 100} |\n| scrollY(object) | Vertical Y Virtual Scrolling Configuration (for manual optimization in special scenarios) For example, {gt: 500} |
\n
Precautions for enabling virtual scrolling
\n
1. Before enabling virtual scrolling, ensure that the width of each column is the same. You can configure the uniform width by setting the column-width attribute on the <tiny-grid> tag. \n2. Enabling virtual scrolling will disable the column width adjustment function. Column dragging will change the column width. As a result, the number of columns in virtual scrolling rendering is incorrectly calculated and the table style is disordered. Therefore, column dragging is prohibited.
\n
| Name | Type | Description | Default Value
|---|
| optimization.scrollX.gt | number | Specifies the number of columns to be automatically started when the number of columns is greater than X Virtual scrolling | 100 |
| optimization.scrollX.rSize | number | number of columns to be rendered each time | |
| optimization.scrollX.vSize | number | number of columns in the visible area | |
| optimization.scrollX.adaptive | boolean | Automatically adapts to the optimal rendering mode (If this parameter is set to false, the column array is intercepted only once after the scrolling is complete, which improves the performance in big data scenarios. However, the white screen will be displayed for a short time and will be restored after the rendering is complete.) | true |
| optimization.scrollY.gt | number | specifies the number of lines. Y: The virtual scrolling function is automatically enabled. | 500 |
| optimization.scrollY.rSize | number | : number of lines to be rendered each time. | |
| optimization.scrollY.adaptive | boolean | : automatically adapts to the optimal rendering mode. (If this parameter is set to false, the row array is captured only once after the scrolling is complete, which improves the performance in big data scenarios. However, white screen will be displayed for a short time and will be restored after the rendering is complete.) | true |
\n\n'
},
- 'codeFiles': ['tiny-first-menu/grid-large-tree-data.vue']
+ 'codeFiles': ['large-data/grid-large-tree-data.vue']
},
{
- 'demoId': 'tiny-first-menu-full-data-loading',
+ 'demoId': 'large-data-full-data-loading',
'name': { 'zh-CN': '全量加载', 'en-US': 'Full Load' },
'desc': {
'zh-CN':
@@ -44,7 +44,7 @@ export default {
'en-US':
'Performance problems may occur when there is too much data in a table. You can use $refs to obtain table objects and set the loadData method of the table objects to enable full loading to optimize performance.
\n'
},
- 'codeFiles': ['tiny-first-menu/full-data-loading.vue']
+ 'codeFiles': ['large-data/full-data-loading.vue']
},
{
'demoId': 'large-data-load-column',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid.js b/examples/sites/demos/pc/app/grid/webdoc/grid.js
index b4f448361..608f52da2 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid.js
@@ -216,8 +216,8 @@ export default {
'type': 'object',
'defaultValue':
'animat: true,delayHover: 250,scrollX: {gt: 100, 指定大于多少范围时自动启动虚拟滚动（启用 X 虚拟滚动，必须固定所有列宽，否则无法兼容）默认100, oSize: 2, 当剩余数据少于指定范围时触发重新渲染 默认自动计算 rSize: 2, 每次渲染条数 默认自动计算 vSize: 5 指定可视区域条数 }, scrollY: { gt: 500, 指定大于多少范围时自动启动虚拟滚动（启用 Y 虚拟滚动，必须固定所有行高，否则无法兼容）默认500 oSize: 2, 当剩余数据少于指定范围时触发重新渲染 默认自动计算 rSize: 2, 每次渲染条数 默认自动计算 vSize: 5, 指定可视区域条数 默认自动计算 rHeight: 50, 指定行高 默认自动计算adaptive: true 自动适配最优的渲染方式 默认true }',
- 'desc': { 'zh-CN': '优化配置项', 'en-US': 'Optimize configuration items' },
- 'demoId': 'grid-grid-optimization#tiny-first-menu-grid-optimization'
+ 'desc': { 'zh-CN': '表格虚拟滚动的优化配置项', 'en-US': 'Optimize configuration items' },
+ 'demoId': 'grid-large-data#large-data-grid-optimization'
},
{
'name': 'params',
@@ -687,7 +687,7 @@ export default {
'en-US':
'Rolling configuration loading; scrollLoad={isInfinity: false //Continuous, \npageSize: 10 //Number of records to be loaded each time}; Sets whether to load pages in scrolling mode. This parameter is valid only when showPager is set to true.'
},
- 'demoId': 'grid-large-data#tiny-first-menu-scroll-paging'
+ 'demoId': 'grid-large-data#large-data-scroll-paging'
},
{
'name': 'row-span',
@@ -1290,7 +1290,7 @@ export default {
'en-US':
'Load data (This parameter may be used in the scenario where table data needs to be reloaded or partially incremented.)'
},
- 'demoId': 'grid-large-data#tiny-first-menu-full-data-loading'
+ 'demoId': 'grid-large-data#large-data-full-data-loading'
},
{
'name': 'recalculate()',
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index fef2d3264..78c05724b 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -133,7 +133,6 @@ export const cmpMenus = [
{ 'nameCn': '边框', 'name': 'Borders', 'key': 'grid-grid-border' },
{ 'nameCn': '高亮', 'name': 'Highlighting', 'key': 'grid-highlight' },
{ 'nameCn': '斑马线条纹', 'name': 'Zebra Crossing Stripes', 'key': 'grid-grid-stripe' },
- { 'nameCn': '优化配置项', 'name': 'OptimizedConfigurationItems', 'key': 'grid-grid-optimization' },
{ 'nameCn': '提示', 'name': 'Tip', 'key': 'grid-tip' },
{ 'nameCn': '对齐方式', 'name': 'Alignment', 'key': 'grid-align' },
{ 'nameCn': '表头', 'name': 'Table Header', 'key': 'grid-header' },
diff --git a/packages/vue/src/grid/__tests__/grid.test.tsx b/packages/vue/src/grid/__tests__/grid.test.tsx
index 2b58194d4..5ee6ecc27 100644
--- a/packages/vue/src/grid/__tests__/grid.test.tsx
+++ b/packages/vue/src/grid/__tests__/grid.test.tsx
@@ -87,8 +87,7 @@ describe('PC Mode', () => {
{data.row.name}
)
- }}
- >
+ }}>
))
@@ -135,7 +134,7 @@ describe('PC Mode', () => {
test.todo('footer-align 所有的表尾列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）')
- test.todo('optimization 优化配置项')
+ test.todo('optimization 表格虚拟滚动的优化配置项')
test.todo('params 额外的参数')