fix(docs): [grid] update big data docs (#703)

examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('全量加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-large-data#tiny-first-menu-full-data-loading')
+  await page.goto('grid-large-data#large-data-full-data-loading')
   await page.locator('.tiny-grid__body').hover()
   // 先滚动1000px
   await page.mouse.wheel(0, 1000)

examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('树表虚拟滚动', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-large-data#tiny-first-menu-grid-large-tree-data')
+  await page.goto('grid-large-data#large-data-grid-large-tree-data')
   // 展开树表
   await page.getByRole('cell', { name: 'IR-1-120个子US' }).locator('path').click()
   await expect(page.getByText('124', { exact: true })).toBeVisible()

examples/sites/demos/pc/app/grid/large-data/scroll-paging.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('滚动分页', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-large-data#tiny-first-menu-scroll-paging')
+  await page.goto('grid-large-data#large-data-scroll-paging')
   const scrollContainer = page.locator('.tiny-grid-body__y-space.visual')
   const scrollBar = page.locator('.tiny-grid-body__y-scrollbar')
   await expect(scrollContainer).toHaveCSS('height', '420px')

examples/sites/demos/pc/app/grid/large-data/virtual-rolling-composition-api.vue

@@ -1,14 +1,5 @@
 <template>
-  <tiny-grid
-    ref="tinyTableRef"
-    height="300"
-    :optimization="{
-      animat: true,
-      delayHover: 250,
-      scrollX: { gt: 20 },
-      scrollY: { gt: 30 }
-    }"
-  >
+  <tiny-grid ref="tinyTableRef" height="300" :optimization="optimizationData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
@@ -17,16 +8,32 @@
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
 const tinyTableRef = ref()
-
-mockData()
+const 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
+  }
+}
 
 // 生成 1000 条模拟数据
-function mockData() {
+const mockData = () => {
   setTimeout(() => {
     const randomAlphabets = () => {
       return Array.from({ length: Math.ceil(Math.random() * 10) })
@@ -47,4 +54,6 @@ function mockData() {
     tinyTableRef.value.loadData(data)
   }, 200)
 }
+
+mockData()
 </script>

examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('虚拟滚动', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-large-data#tiny-first-menu-virtual-rolling')
+  await page.goto('grid-large-data#large-data-virtual-rolling')
   await page.locator('.tiny-grid__body').hover()
   // 先滚动1000px
   await page.mouse.wheel(0, 1000)

examples/sites/demos/pc/app/grid/large-data/virtual-rolling.vue

@@ -1,14 +1,5 @@
 <template>
-  <tiny-grid
-    ref="tinyTable"
-    height="300"
-    :optimization="{
-      animat: true,
-      delayHover: 250,
-      scrollX: { gt: 20 },
-      scrollY: { gt: 30 }
-    }"
-  >
+  <tiny-grid ref="tinyTable" height="300" :optimization="optimizationData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
@@ -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()

examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization-composition-api.vue

@@ -1,79 +0,0 @@
-<template>
-  <tiny-grid :data="tableData" :optimization="optimizationData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
-
-const optimizationData = ref({
-  animat: false,
-  delayHover: 1000,
-  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
-  }
-})
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    area: '华东区',
-    address: '福州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '2',
-    name: 'WWWW科技YX公司',
-    area: '华南区',
-    address: '深圳福田区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    area: '华南区',
-    address: '中山市',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '4',
-    name: 'TGBYX公司',
-    area: '华北区',
-    address: '梅州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    area: '华南区',
-    address: '韶关',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '6',
-    name: '康康物业YX公司',
-    area: '华北区',
-    address: '广州天河区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  }
-])
-
-tableData.value = [...tableData.value, ...tableData.value, ...tableData.value, ...tableData.value]
-</script>

examples/sites/demos/pc/app/grid/tiny-first-menu/grid-optimization.vue

@@ -1,89 +0,0 @@
-<template>
-  <tiny-grid :data="tableData" :optimization="optimizationData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  created() {
-    this.tableData = [...this.tableData, ...this.tableData, ...this.tableData, ...this.tableData]
-  },
-  data() {
-    return {
-      optimizationData: {
-        animat: false,
-        delayHover: 1000,
-        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
-        }
-      },
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          area: '华东区',
-          address: '福州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '2',
-          name: 'WWWW科技YX公司',
-          area: '华南区',
-          address: '深圳福田区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          area: '华南区',
-          address: '中山市',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '4',
-          name: 'TGBYX公司',
-          area: '华北区',
-          address: '梅州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          area: '华南区',
-          address: '韶关',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '6',
-          name: '康康物业YX公司',
-          area: '华北区',
-          address: '广州天河区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        }
-      ]
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.cn.md

@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-<div>表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。</div>

examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.en.md

@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-<div>Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.</div>

examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.js

@@ -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':
-          '<div class="tip custom-block"><p class="custom-block-title">optimization(object) 配置说明</p>\n<p>| animat(boolean) | 表格动画效果开关（关闭后视觉效果更快）默认为 true |\n| delayHover(number) | 当表格发生拖动、滚动...等行为时，至少多少毫秒之后才允许触发 hover 事件 默认 250ms |\n| scrollX(object) | 横向 X 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 100 } |\n| scrollY(object) | 纵向 Y 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 500 } |</p>\n</div>\n<p></p>\n',
-        'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title">optimization(object) Configuration Description </p>\n<p>| 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} |</p>\n</div>\n<p></p>\n'
-      },
-      'codeFiles': ['tiny-first-menu/grid-optimization.vue']
-    }
-  ],
-  apis: [{ 'name': 'grid-grid-optimization', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
-}

examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.json.cn.md

@@ -1,7 +0,0 @@
----
-title:  Grid 表格
----
-
-#  Grid 表格
-
-<div>表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。</div>

examples/sites/demos/pc/app/grid/webdoc/grid-grid-optimization.json.en.md

@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-<div>Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.</div>

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':
           '<p>Scrolling pagination configuration procedure:\n1. Set the table attribute <code>fetch-data</code> to enable the service request. \n2. Set <code>scroll-load</code> to enable scrolling. </p>\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':
           '<p>Virtual scrolling configuration procedure:\n1. Set <code>height</code> to a fixed height for table attributes. \n2. Set <code>optimization</code> to enable virtual scrolling. </p>\n<div class="tip custom-block"><p class="custom-block-title">optimization(object) configuration description: </p>\n<p>| 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} |</p>\n</div>\n<div class="tip custom-block"><p class="custom-block-title"> Precautions for enabling virtual scrolling</p>\n<p>1. Before enabling virtual scrolling, ensure that the width of each column is the same. You can configure the uniform width by setting the <code>column-width</code> attribute on the <code>&lt;tiny-grid&gt;</code> 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. </p>\n</div>\n'
       },
-      'codeFiles': ['tiny-first-menu/virtual-rolling.vue']
+      'codeFiles': ['large-data/virtual-rolling.vue']
     },
     {
-      'demoId': 'tiny-first-menu-grid-large-tree-data',
+      'demoId': 'large-data-grid-large-tree-data',
       'name': { 'zh-CN': '树表虚拟滚动', 'en-US': 'Virtual scrolling of the tree table' },
       'desc': {
         'zh-CN':
@@ -33,10 +33,10 @@ export default {
         'en-US':
           '<p><table class="table"><thead><tr><th> Name</th><th>Type</th><th>Description</th>Default Value </th></tr></thead> <tbody><tr><td>optimization.scrollX.gt</td> <td>number</td> <td> Specifies the number of columns to be automatically started when the number of columns is greater than X Virtual scrolling </td> <td>100</td></tr> <tr><td>optimization.scrollX.rSize</td> <td>number</td> <td> number of columns to be rendered each time </td> <td></td></tr> <tr><td>optimization.scrollX.vSize</td> <td>number</td> <td> number of columns in the visible area </td> <td></td></tr> <tr><td>optimization.scrollX.adaptive</td> <td>boolean</td> <td> 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.) </td> <td>true</td></tr> <tr><td>optimization.scrollY.gt</td> <td>number</td> <td> specifies the number of lines. Y: The virtual scrolling function is automatically enabled. </td> <td>500</td></tr> <tr><td>optimization.scrollY.rSize</td> <td>number</td> <td>: number of lines to be rendered each time. </td> <td></td></tr> <tr><td>optimization.scrollY.adaptive</td> <td>boolean</td> <td>: 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.) </td> <td>true</td></tr></tbody></table></p>\n</div>\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':
           '<p>Performance problems may occur when there is too much data in a table. You can use <code>$refs</code> to obtain table objects and set the <code>loadData</code> method of the table objects to enable full loading to optimize performance. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/full-data-loading.vue']
+      'codeFiles': ['large-data/full-data-loading.vue']
     },
     {
       'demoId': 'large-data-load-column',

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()',

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' },

packages/vue/src/grid/__tests__/grid.test.tsx

@@ -87,8 +87,7 @@ describe('PC Mode', () => {
                 {data.row.name}
               </span>
             )
-          }}
-        ></GridColumn>
+          }}></GridColumn>
         <GridColumn field="city" titile="城市" width="100"></GridColumn>
       </Grid>
     ))
@@ -135,7 +134,7 @@ describe('PC Mode', () => {
 
   test.todo('footer-align 所有的表尾列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）')
 
-  test.todo('optimization 优化配置项')
+  test.todo('optimization 表格虚拟滚动的优化配置项')
 
   test.todo('params 额外的参数')