@opentiny/vue-docs 2.1.9 → 2.1.10

package/demos/pc/app/grid/webdoc/grid-large-data.js

@@ -2,25 +2,25 @@ export default {
   column: '1',
   owner: '',
   demos: [
-    {
-      'demoId': 'large-data-scroll-paging',
-      'name': { 'zh-CN': '滚动分页', 'en-US': 'Scroll Pagination' },
-      'desc': {
-        'zh-CN':
-          '<p>滚动分页配置步骤：\n1、表格属性设置 <code>fetch-data</code> 开启服务请求；\n2、表格属性设置 <code>scroll-load</code> 开启滚动分页。</p>\n',
-        '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': ['large-data/scroll-paging.vue']
-    },
     {
       'demoId': 'large-data-virtual-rolling',
       'name': { 'zh-CN': '虚拟滚动', 'en-US': 'Virtual Scrolling' },
       'desc': {
-        'zh-CN':
-          '<p>虚拟滚动配置步骤：\n1、表格属性设置 <code>height</code> 固定高度；\n2、表格属性设置 <code>optimization</code> 开启虚拟滚动。</p>\n<div class="tip custom-block"><p class="custom-block-title">optimization(object) 配置说明</p>\n<p>| delayHover(number) | 当表格发生拖动、滚动...等行为时，至少多少毫秒之后才允许触发 hover 事件 默认 250ms |\n| scrollX(object) | 横向 X 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 100 } |\n| scrollY(object) | 纵向 Y 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 500 } |</p>\n</div>\n<div class="tip custom-block"><p class="custom-block-title">开启虚拟滚动注意事项</p>\n<p>1、开启虚拟滚动的前提是需要保证每列的宽度一样，可以通过在 <code>&lt;tiny-grid&gt;</code> 标签上的 <code>column-width</code> 属性配置统一的宽度。\n2、开启虚拟滚动将会禁用列宽调整功能，因为列拖拽会改变列宽度，导致虚拟滚动渲染的列数计算有误从而引起表格样式错乱，所以禁止列拖拽。</p>\n</div>\n',
-        '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'
+        'zh-CN': `
+        <p>虚拟滚动配置步骤：1、表格属性设置 <code>height</code> 固定高度；2、表格属性设置 <code>optimization</code> 开启虚拟滚动。</p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">optimization(object) 配置说明：</p>
+          <ul>
+            <li><code>delayHover</code>：当表格发生拖动、滚动...等行为时，至少多少毫秒之后才允许触发 hover 事件 默认 250ms</li>
+            <li><code>scrollX</code>：横向 X 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 100 }</li>
+            <li><code>scrollY</code>：纵向 Y 虚拟滚动配置（用于特殊场景手动调优）例如：{ gt: 500 }</li>
+          </ul>
+      </div>
+      <div class="tip custom-block">
+        <p class="custom-block-title">开启虚拟滚动注意事项</p>
+        <p>1、开启虚拟滚动的前提是需要保证每列的宽度一样，可以通过在 <code>&lt;tiny-grid&gt;</code> 标签上的 <code>column-width</code> 属性配置统一的宽度。\n2、开启虚拟滚动将会禁用列宽调整功能，因为列拖拽会改变列宽度，导致虚拟滚动渲染的列数计算有误从而引起表格样式错乱，所以禁止列拖拽。</p>\n
+      </div>`,
+        'en-US': ''
       },
       'codeFiles': ['large-data/virtual-rolling.vue']
     },
@@ -28,10 +28,57 @@ export default {
       'demoId': 'large-data-grid-large-tree-data',
       'name': { 'zh-CN': '树表虚拟滚动', 'en-US': 'Virtual scrolling of the tree table' },
       'desc': {
-        'zh-CN':
-          '<p><table class="table"><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>默认值</th></tr></thead> <tbody><tr><td>optimization.scrollX.gt</td> <td>number</td> <td>指定大于多少列时自动启动 X 虚拟滚动</td> <td>100</td></tr> <tr><td>optimization.scrollX.rSize</td> <td>number</td> <td>每次渲染列数</td> <td></td></tr> <tr><td>optimization.scrollX.vSize</td> <td>number</td> <td>指定可视区域列数</td> <td></td></tr> <tr><td>optimization.scrollX.adaptive</td> <td>boolean</td> <td>自动适配最优的渲染方式（设置为 false 列数组只会在滚动完成后截取一次，便于大数据场景提升性能，但是会短暂白屏，渲染完成后即恢复）</td> <td>true</td></tr> <tr><td>optimization.scrollY.gt</td> <td>number</td> <td>指定大于多少行时自动启动 Y 虚拟滚动</td> <td>500</td></tr> <tr><td>optimization.scrollY.rSize</td> <td>number</td> <td>每次渲染行数</td> <td></td></tr> <tr><td>optimization.scrollY.adaptive</td> <td>boolean</td> <td>自动适配最优的渲染方式（设置为 false 行数组只会在滚动完成后截取一次，便于大数据场景提升性能，但是会短暂白屏，渲染完成后即恢复）</td> <td>true</td></tr></tbody></table></p>\n</div>\n',
-        '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'
+        'zh-CN': `
+        <table class="table">
+          <thead>
+            <tr>
+              <th>名称</th> 
+              <th>类型</th> 
+              <th>描述</th> 
+              <th>默认值</th>
+            </tr>
+          </thead> 
+          <tbody>
+            <tr>
+              <td>optimization.scrollX.gt</td> <td>number</td> 
+              <td>指定大于多少列时自动启动 X 虚拟滚动</td> 
+              <td>100</td></tr> <tr><td>optimization.scrollX.rSize</td> 
+              <td>number</td> 
+              <td>每次渲染列数</td> 
+              <td></td>
+            </tr> 
+            <tr>
+              <td>optimization.scrollX.vSize</td> 
+              <td>number</td> 
+              <td>指定可视区域列数</td> 
+              <td></td>
+            </tr> 
+            <tr>
+              <td>optimization.scrollX.adaptive</td> <td>boolean</td> 
+              <td>自动适配最优的渲染方式（设置为 false 列数组只会在滚动完成后截取一次，便于大数据场景提升性能，但是会短暂白屏，渲染完成后即恢复）</td> 
+              <td>true</td>
+            </tr> 
+            <tr>
+              <td>optimization.scrollY.gt</td> 
+              <td>number</td> 
+              <td>指定大于多少行时自动启动 Y 虚拟滚动</td> 
+              <td>500</td>
+            </tr> 
+            <tr>
+              <td>optimization.scrollY.rSize</td> 
+              <td>number</td> <td>每次渲染行数</td> 
+              <td></td>
+            </tr> 
+            <tr>
+              <td>optimization.scrollY.adaptive</td> 
+              <td>boolean</td> 
+              <td>自动适配最优的渲染方式（设置为 false 行数组只会在滚动完成后截取一次，便于大数据场景提升性能，但是会短暂白屏，渲染完成后即恢复）</td> 
+              <td>true</td>
+            </tr>
+          </tbody>
+        </table>
+        `,
+        'en-US': ''
       },
       'codeFiles': ['large-data/grid-large-tree-data.vue']
     },
@@ -62,7 +109,7 @@ export default {
       'name': { 'zh-CN': '滚动到指定位置', 'en-US': 'Scroll to the specified position' },
       'desc': {
         'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">方法说明</p>\n<p> <code>scrollTo(scrollLeft, scrollTop)</code>：滚动到对应的位置\n<code>scrollToRow(row)</code>：滚动到对应的行\n<code>scrollToColumn(column)</code>：手滚动到对应的列</p>\n</div>\n',
+          '<div class="tip custom-block"><p class="custom-block-title">方法说明</p>\n<p> <code>scrollTo(scrollLeft, scrollTop)</code>：滚动到对应的位置\n<code>scrollToRow(row)</code>：滚动到对应的行\n<code>scrollToColumn(column)</code>：手滚动到对应的列。</p>\n</div>\n',
         'en-US':
           '<div class="tip custom-block"><p class="custom-block-title"> Method Description </p>\n<p> <code>scrollTo(scrollLeft, scrollTop)</code>: Scroll to the corresponding position \n<code>scrollToRow(row)</code>: Scroll to the corresponding row \n<code>scrollToColumn(column)</code>: Scroll to the corresponding column </p>\n</div>\n'
       },

package/demos/pc/app/grid/webdoc/grid-loading.js

@@ -15,7 +15,7 @@ export default {
     {
       'demoId': 'loading-grid-loading-tip',
       'name': { 'zh-CN': '开启加载中状态', 'en-US': 'Enable loading status' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['loading/grid-loading-tip.vue']
     }
   ],

package/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js

@@ -8,24 +8,24 @@ export default {
       'desc': {
         'zh-CN': `
         <div class="tip custom-block">
-          <p class="custom-block-title">按键说明</p>
+          <p class="custom-block-title">按键说明：</p>
           <ul>
-            <li><code>Arrow Up ↑</code>：移动到当前活动单元格上面的单元格</li>
-            <li><code>Arrow Down ↓</code>：移动到当前活动单元格下面的单元格</li>
-            <li><code>Arrow Left ←</code>：移动到当前活动单元格左边的单元格</li>
-            <li><code>Arrow Right →</code>：移动到当前活动单元格右边的单元格</li>
-            <li><code>Tab</code>：移动到当前选中或活动单元格的右侧单元格，如果到最后一列且存在下一行，则从下一行开始移动</li>
-            <li><code>Tab + Shift</code>：移动到当前选中或活动单元格的左侧单元格，如果到第一列且存在上一行，则从上一行开始移动</li>
-            <li><code>Spacebar</code>：如果单元格是复选框或单选框则切换勾选状态</li>
-            <li><code>Enter</code>：取消编辑并移动到当前活动单元格下面的单元格</li>
-            <li><code>Delete</code>：清空内容</li>
-            <li><code>Backspace</code>：清空内容并激活选中单元格为编辑状态</li>
-            <li><code>F2</code>：激活单元格编辑</li>
-            <li><code>Esc</code>： 取消单元格编辑</li>
-            <li><code>Page Up</code>：向上翻页滚动</li>
-            <li><code>Page Down</code>：向下翻页滚动</li>
-            <li><code>Home</code>：滚动到顶部</li>
-            <li><code>End</code>：滚动到底部</li>
+            <li><code>Arrow Up ↑</code>：移动到当前活动单元格上面的单元格。</li>
+            <li><code>Arrow Down ↓</code>：移动到当前活动单元格下面的单元格。</li>
+            <li><code>Arrow Left ←</code>：移动到当前活动单元格左边的单元格。</li>
+            <li><code>Arrow Right →</code>：移动到当前活动单元格右边的单元格。</li>
+            <li><code>Tab</code>：移动到当前选中或活动单元格的右侧单元格，如果到最后一列且存在下一行，则从下一行开始移动。</li>
+            <li><code>Tab + Shift</code>：移动到当前选中或活动单元格的左侧单元格，如果到第一列且存在上一行，则从上一行开始移动。</li>
+            <li><code>Spacebar</code>：如果单元格是复选框或单选框则切换勾选状态。</li>
+            <li><code>Enter</code>：取消编辑并移动到当前活动单元格下面的单元格。</li>
+            <li><code>Delete</code>：清空内容。</li>
+            <li><code>Backspace</code>：清空内容并激活选中单元格为编辑状态。</li>
+            <li><code>F2</code>：激活单元格编辑。</li>
+            <li><code>Esc</code>： 取消单元格编辑。</li>
+            <li><code>Page Up</code>：向上翻页滚动。</li>
+            <li><code>Page Down</code>：向下翻页滚动。</li>
+            <li><code>Home</code>：滚动到顶部。</li>
+            <li><code>End</code>：滚动到底部。</li>
           </ul>
         </div>`,
         'en-US': ''

package/demos/pc/app/grid/webdoc/grid-operation-column.js

@@ -64,7 +64,7 @@ export default {
     },
     {
       'demoId': 'operation-column-custom-operation-column',
-      'name': { 'zh-CN': '自定义操作列内容', 'en-US': '' },
+      'name': { 'zh-CN': '自定义操作列内容。', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>通过插槽设置自定义操作列，即 <code>&lt;tiny-grid-column&gt;</code> 自定义操作列内容 <code>&lt;/tiny-grid-column&gt;</code> 。</p>\n',
@@ -76,7 +76,8 @@ export default {
       'demoId': 'operation-column-dropdown',
       'name': { 'zh-CN': '表头下拉菜单', 'en-US': '' },
       'desc': {
-        'zh-CN': '<p>使用多选列 dropdown 插槽，可以在多选列表头配置自定义下拉菜单，示例中使用 AuiDropdown 组件。</p>\n',
+        'zh-CN':
+          '<p>使用多选列 dropdown 插槽，可以在多选列表头配置自定义下拉菜单，示例中使用 TinyDropdown 组件。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['operation-column/dropdown.vue']

package/demos/pc/app/grid/webdoc/grid-pager.js

@@ -7,8 +7,7 @@ export default {
       'name': { 'zh-CN': '使用默认分页组件', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN': '<p>如果不配置 <code>{component: Pager}</code> 则默认使用内置的分页组件。</p>\n',
-        'en-US':
-          "<p>To ensure that the table is lightweight and open, the table is modularized and split. The core code is lightweight. The paging component needs to be introduced to the paging function. The built-in paging configuration procedure is as follows: \n1. <code>import</code> introduces the official <code>Pager</code> component. That is, <code>import Pager from '@opentiny/vue-pager'</code> or <code>{Pager} from '@opentiny/vue'</code>. \n2. <code>Pager</code> is transferred to the <code>data()</code> function and stored for use in the template. \n3. Set the table attribute <code>pager</code> to configure pagination and inject the pagination component through the <code>{component: Pager}</code> attribute of <code>pager</code>. \n4. Configure the seq-serial attribute to set the sequence number to be displayed consecutively after page turning. By default, the sequence number is displayed discontinuously.</p>\n"
+        'en-US': ''
       },
       'codeFiles': ['pager/inner-default-pager.vue']
     },
@@ -17,7 +16,7 @@ export default {
       'name': { 'zh-CN': '使用第三方分页组件', 'en-US': 'The system prompts you to save data.' },
       'desc': {
         'zh-CN':
-          "<p>第三方分页组件配置步骤：\n1、<code>import</code> 引入自己引入的分页组件（这里使用官方的分页组件示范） <code>Pager</code> 组件，即 <code>import Pager from '@opentiny/vue-pager'</code> 或者 <code>{ Pager } from '@opentiny/vue'</code> 。\n2、<code>Pager</code> 传入给 <code>data()</code> 函数存储起来以便模板中使用。\n3、表格属性设置 <code>pager</code> 进行分页相关配置，通过 <code>pager</code> 的属性 <code>{component: Pager}</code> 注入分页组件。\n4、配置 seq-serial 属性可以设置翻页后序号连续显示，默认是不连续显示的</p>\n",
+          "<p>第三方分页组件配置步骤：\n1、<code>import</code> 引入自己引入的分页组件（这里使用官方的分页组件示范） <code>Pager</code> 组件，即 <code>import Pager from '@opentiny/vue-pager'</code> 或者 <code>{ Pager } from '@opentiny/vue'</code> 。\n2、<code>Pager</code> 传入给 <code>data()</code> 函数存储起来以便模板中使用。\n3、表格属性设置 <code>pager</code> 进行分页相关配置，通过 <code>pager</code> 的属性 <code>{component: Pager}</code> 注入分页组件。\n4、配置 seq-serial 属性可以设置翻页后序号连续显示，默认是不连续显示的。</p>\n",
         'en-US':
           '<p>Configure the <code>showSaveMsg</code> attribute. When the table data is modified, the system prompts you to save the modification.</p>\n'
       },
@@ -27,7 +26,7 @@ export default {
       'demoId': 'pager-show-save-msg',
       'name': { 'zh-CN': '提示保存数据', 'en-US': '' },
       'desc': {
-        'zh-CN': '<p>配置 <code>showSaveMsg</code> 属性，当检查到表格数据存在修改时，会提示用户进行保存</p>\n',
+        'zh-CN': '<p>配置 <code>showSaveMsg</code> 属性，当检查到表格数据存在修改时，会提示用户进行保存。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['pager/show-save-msg.vue']

package/demos/pc/app/grid/webdoc/grid-renderer.js

@@ -6,8 +6,28 @@ export default {
       'demoId': 'renderer-inner-renderer',
       'name': { 'zh-CN': '内置渲染器', 'en-US': 'Built-in Renderer' },
       'desc': {
-        'zh-CN':
-          '<p>内置渲染器设置当前表格列的显示获取类型。\n在 <code>grid-column</code> 列配置 <code>format-text</code> 对象，配合 <code>format-config</code> 可以控制数据格式。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> <code>format-text</code> 的可取值包括：</p>\n<ul>\n<li><code>integer</code>：显示成整数。</li>\n<li><code>number</code>：显示成小数。</li>\n<li><code>money</code>：显示成钱数。</li>\n<li>rate：显示成百分比的数据。</li>\n<li>filesize：显示成文件大小的数据。</li>\n<li>boole：显示成对号或者叉号的图标。</li>\n<li>date：显示成年月日。</li>\n<li>dateTime：显示成年月日时分。</li>\n<li>longDateTime：显示成年月日时分秒。</li>\n<li>time：显示成时分。</li>\n<li>longTime：显示成时分秒。</li>\n<li>yearMonth：显示成年月。</li>\n<li>enum：通过数据的值，查询出要显示的文本。</li>\n<li>ellipsis：显示成省略的内容，鼠标移到该单元格上，显示完整内容的提示信息。需要同时配置 format 的 len 属性。</li>\n</ul>\n</div>\n',
+        'zh-CN': `
+        <p>内置渲染器设置当前表格列的显示获取类型。\n在 <code>grid-column</code> 列配置 <code>format-text</code> 对象，配合 <code>format-config</code> 可以控制数据格式。</p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">TIP</p>\n<p> <code>format-text</code> 的可取值包括：</p>
+          <ul>
+            <li><code>integer</code>：显示成整数。</li>
+            <li><code>number</code>：显示成小数。</li>
+            <li><code>money</code>：显示成钱数。</li>
+            <li>rate：显示成百分比的数据。</li>
+            <li>filesize：显示成文件大小的数据。</li>
+            <li>boole：显示成对号或者叉号的图标。</li>
+            <li>date：显示成年月日。</li>
+            <li>dateTime：显示成年月日时分。</li>
+            <li>longDateTime：显示成年月日时分秒。</li>
+            <li>time：显示成时分。</li>
+            <li>longTime：显示成时分秒。</li>
+            <li>yearMonth：显示成年月。</li>
+            <li>enum：通过数据的值，查询出要显示的文本。</li>
+            <li>ellipsis：显示成省略的内容，鼠标移到该单元格上，显示完整内容的提示信息。需要同时配置 format 的 len 属性。</li>
+          </ul>
+        </div>
+        `,
         'en-US':
           '<p>The built-in renderer sets the display obtaining type of the current table column. \n Configure the <code>format-text</code> object in the <code>grid-column</code> column to control the data format. The options of </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> <code>format-text</code> are as follows: </p>\n<ul>\n<li><code>integer</code>: displayed as an integer. </li>\n<li><code>number</code>: The value is displayed as a decimal. </li>\n<li><code>money</code>: displays the amount of money. </li>\n<li>rate: The data is displayed as a percentage. </li>\n<li>filesize: indicates the file size. </li>\n<li>boole: displays the icon with a pair or cross. </li>\n<li>date: indicates the year, month, and day. </li>\n<li>dateTime: indicates the year, month, day, hour, and minute. </li>\n<li>longDateTime: year, month, day, hour, minute, and second. </li>\n<li>time: time and hour. </li>\n<li>longTime: hour, minute, and second. </li>\n<li>yearMonth: displays the adult month. </li>\n<li>enum: Queries the text to be displayed based on the data value. </li>\n<li>ellipsis: displays the omitted content. When you move the cursor to the cell, the complete content is displayed. The len attribute of format must also be configured. </li>\n</ul>\n</div>\n'
       },

package/demos/pc/app/grid/webdoc/grid-size.js

@@ -75,7 +75,7 @@ export default {
       'demoId': 'size-resize-column-width',
       'name': { 'zh-CN': '开启列宽拖拽', 'en-US': 'Enable column width dragging' },
       'desc': {
-        'zh-CN': '<p>列宽默认开启，如需禁用需要设置<code>resizable</code>为<code>false</code></p>\n',
+        'zh-CN': '<p>列宽默认开启，如需禁用需要设置<code>resizable</code>为<code>false</code>。</p>\n',
         'en-US':
           '<p>Column width is enabled by default. To disable this function, set <code>resizable</code> to <code>false</code></p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-slot.js

@@ -5,31 +5,31 @@ export default {
     {
       'demoId': 'slot-default-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['slot/default-slot.vue']
     },
     {
       'demoId': 'slot-buttons-slot',
       'name': { 'zh-CN': '工具栏插槽', 'en-US': 'Toolbar slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['slot/buttons-slot.vue']
     },
     {
       'demoId': 'slot-empty-slot',
       'name': { 'zh-CN': '空数据显示插槽', 'en-US': 'Empty data display slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['slot/empty-slot.vue']
     },
     {
       'demoId': 'slot-editor-slot',
       'name': { 'zh-CN': '编辑器插槽', 'en-US': 'Editor slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['slot/editor-slot.vue']
     },
     {
       'demoId': 'slot-header-slot',
       'name': { 'zh-CN': '表头插槽', 'en-US': 'Table header slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['slot/header-slot.vue']
     }
   ],

package/demos/pc/app/grid/webdoc/grid-sort.js

@@ -50,7 +50,7 @@ export default {
       'name': { 'zh-CN': '表格服务端排序', 'en-US': 'Table server sorting' },
       'desc': {
         'zh-CN':
-          '<p>通过表格列设置 <code>sortable</code> 属性开启该列排序功能，然后表格设置 <code>remote-sort</code> 方法开启服务端排序。\n该示例中的 <code>services/getGridMockData</code> 服务需要自行实现，示例模拟了远程服务返回的数据\n</p>\n',
+          '<p>通过表格列设置 <code>sortable</code> 属性开启该列排序功能，然后表格设置 <code>remote-sort</code> 方法开启服务端排序。\n该示例中的 <code>services/getGridMockData</code> 服务需要自行实现，示例模拟了远程服务返回的数据。</p>\n',
         'en-US':
           '<p>Set the <code>sortable</code> attribute of the table column to enable the sorting function, and then set the <code>remote-sort</code> method to enable the sorting function on the server. \nIn this example, the <code>services/getGridMockData</code> service needs to be implemented. The example simulates the data returned by the remote service.\n</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-span.js

@@ -27,7 +27,7 @@ export default {
       'name': { 'zh-CN': '列合并', 'en-US': 'Column Merge' },
       'desc': {
         'zh-CN':
-          '<p>列合并是通过表格列设置方法 <code>span-method</code> 实现的自定义合并规则。例如：</p>\n<blockquote>\n<p>实现2列合并</p>\n</blockquote>\n',
+          '<p>列合并是通过表格列设置方法 <code>span-method</code> 实现的自定义合并规则。例如：</p>\n<blockquote>\n<p>实现2列合并。</p>\n</blockquote>\n',
         'en-US':
           '<p>Column combination is a user-defined combination rule implemented by using the <code>span-method</code> table column setting method. For example, </p>\n<blockquote>\n<p> can combine two columns into </p>\n</blockquote>\n'
       },

package/demos/pc/app/grid/webdoc/grid-tip.js

@@ -10,9 +10,9 @@ export default {
           <div class="tip custom-block">
             <p class="custom-block-title">TIP</p>\n<p> <code>show-header-overflow</code> 可选值有：</p>
             <ul>
-              <li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息，<code>show-overflow</code> 开启时的缺省提示</li>
-              <li><code>title</code>：和原生标签的 <code>title</code> 属性一致</li>
-              <li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示</li>
+              <li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息，<code>show-overflow</code> 开启时的缺省提示。</li>
+              <li><code>title</code>：和原生标签的 <code>title</code> 属性一致。</li>
+              <li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示。</li>
             </ul>
           </div>`,
         'en-US':
@@ -24,8 +24,17 @@ export default {
       'demoId': 'tip-cell-tip',
       'name': { 'zh-CN': '单元格提示', 'en-US': 'Cell Prompt' },
       'desc': {
-        'zh-CN':
-          '<p>单元格提示有2种，一种是 <code>show-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-overflow</code> 内容超出当前行时隐藏并提示。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> <code>show-overflow</code> 可选值有：</p>\n<ul>\n<li><code>title</code>：和原生标签的 <code>title</code> 属性一致</li>\n<li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示</li>\n<li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息</li>\n</ul>\n</div>\n',
+        'zh-CN': `
+        <p>单元格提示有2种，一种是 <code>show-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-overflow</code> 内容超出当前行时隐藏并提示。</p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">TIP</p>
+          <p> <code>show-overflow</code> 可选值有：</p>
+          <ul>
+            <li><code>title</code>：和原生标签的 <code>title</code> 属性一致</li>
+            <li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示</li>
+            <li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息</li>
+          </ul>
+        </div>\n`,
         'en-US':
           '<p> There are two types of cell prompts. One is the <code>show-tip</code> prompt (a prompt is displayed regardless of whether the content exceeds the current line). The other is the <code>show-overflow</code> prompt is hidden and displayed when the content exceeds the current line. The options of </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> <code>show-overflow</code> are as follows: </p>\n<ul>\n<li><code>title</code>: consistent with the <code>title</code> attribute of the native tag </li>\n<li><code>ellipsis</code>: <code>...</code> is displayed for the extra content. </li>\n<li><code>tooltip</code>: <code>...</code> is displayed for the extra content. The left/right pop-up prompt layer displays all information. The default prompt when <code>show-overflow</code> is enabled\n<code>tooltip</code> can be prompted through the <code>Grid</code> property <code>: Configure tooltip-config</code>. For details about the configuration method, see </li>\n</ul>\n</div>\n of the Tooltip</code> component'
       },
@@ -36,7 +45,7 @@ export default {
       'name': { 'zh-CN': '自定义单元格提示', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p> <code>tooltip</code> 提示可通过 <code>Grid</code> 属性 <code>:tooltip-config</code> 进行配置，配置中的<code>contentMethod</code>方法可以自定义提示内容，配置方式参考 <code>Tooltip</code> 组件</p>\n',
+          '<p> <code>tooltip</code> 提示可通过 <code>Grid</code> 属性 <code>:tooltip-config</code> 进行配置，配置中的<code>contentMethod</code>方法可以自定义提示内容，配置方式参考 <code>Tooltip</code> 组件。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['tip/cell-tip-config.vue']

package/demos/pc/app/grid/webdoc/grid-toolbar.js

@@ -6,8 +6,11 @@ export default {
       'demoId': 'toolbar-insert-delete-update',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN':
-          '<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。\n3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现增删改操作的业务逻辑。</p>\n<div class="tip custom-block"><p class="custom-block-title">新增的行需要标记新增状态的样式时需要配置 edit-config 的 markInsert 项为 true</p>\n</div>\n',
+        'zh-CN': `
+        <p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。\n3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现增删改操作的业务逻辑。</p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">新增的行需要标记新增状态的样式时需要配置 edit-config 的 markInsert 项为 true。</p>
+        </div>`,
         'en-US':
           '<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot=&quot;toolbar&quot;</code> . \n2. Set the toolbar component attribute <code>buttons</code> and configure the button group. \n3. Table event setting: The <code>@toolbar-button-click</code> obtains the <code>buttons</code> event on the toolbar. Users can customize the service logic for adding, deleting, and modifying operations. To mark a new line in the </p>\n<div class="tip custom-block"><p class="custom-block-title"> state, set markInsert in edit-config to true</p>\n</div>\n'
       },
@@ -18,7 +21,7 @@ export default {
       'name': { 'zh-CN': '取消删除', 'en-US': 'Cancel deletion' },
       'desc': {
         'zh-CN':
-          '<p>在工具栏中配置 <code>mark_cancel</code> 的 code，勾选数据后，单击 <code>删除/取消删除</code> 按钮，勾选的数据将标记删除线。再单击 <code>保存</code> 按钮请求服务删除标记的数据。已标记删除线的数据勾选后再次单击 <code>删除/取消删除</code> 按钮，会取消删除线。\n 需要配置 fetch-data 请求服务时才有标记删除线和取消删除线的效果\n</p>\n',
+          '<p>在工具栏中配置 <code>mark_cancel</code> 的 code，勾选数据后，单击 <code>删除/取消删除</code> 按钮，勾选的数据将标记删除线。再单击 <code>保存</code> 按钮请求服务删除标记的数据。已标记删除线的数据勾选后再次单击 <code>删除/取消删除</code> 按钮，会取消删除线。\n 需要配置 fetch-data 请求服务时才有标记删除线和取消删除线的效果。\n</p>\n',
         'en-US':
           '<p>Configure the code of <code>mark_cancel</code> on the toolbar, select the data, and click <code>Delete/Undelete</code>. The selected data is marked with strikethrough. Then click the <code>Save</code> button to request the service to delete the marked data. Select the data marked with strikethrough and click <code>Delete/Undelete</code> again to cancel the strikethrough. \nThe effect of marking and canceling strikethrough is available only when the fetch-data request service is configured.\n</p>\n'
       },
@@ -75,8 +78,11 @@ export default {
       'demoId': 'toolbar-refresh-grid',
       'name': { 'zh-CN': '开启表格刷新功能', 'en-US': 'Enable the table refresh function' },
       'desc': {
-        'zh-CN':
-          "<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>\n<ul>\n<li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>\n</ul>\n",
+        'zh-CN': `
+        <p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
+        <ul>
+          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>
+        </ul>`,
         'en-US':
           "<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot=&quot;toolbar&quot;</code> . \n2. Set the toolbar component attribute <code>refresh</code> to enable the table refresh function. </p>\n<ul>\n<li> Setting Toolbar Properties <code>loading</code>Enable/Disable Loading. \n <code>handleFetch('reload') </code></li>\n</ul>\n is invoked when the customized implementation is refreshed"
       },
@@ -96,7 +102,7 @@ export default {
     {
       'demoId': 'toolbar-grid-full-screen-height',
       'name': { 'zh-CN': '全屏时改变表格高度', 'en-US': 'Change the table height in full screen mode' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['toolbar/grid-full-screen-height.vue']
     },
     {

package/demos/pc/app/grid/webdoc/grid-tree-table.js

@@ -10,7 +10,7 @@ export default {
       },
       'desc': {
         'zh-CN':
-          "<p>在 grid 标签上配置 tree-config={children: 'children',renderIcon},其中renderIcon可以自定义树表的展开收缩图标。以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性</p>\n",
+          "<p>在 grid 标签上配置 tree-config={children: 'children',renderIcon},其中renderIcon可以自定义树表的展开收缩图标。以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性。</p>\n",
         'en-US':
           "<p>Configure tree-config=&quot;{children:'children'}&quot; on the grid tab to display data in a tree. In addition, you need to configure the tree-node attribute</p>\n on the field that displays the tree node"
       },
@@ -21,7 +21,7 @@ export default {
       'name': { 'zh-CN': '扁平化数据结构', 'en-US': 'Flat Data Structure' },
       'desc': {
         'zh-CN':
-          '<p>注意：扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构</p>\n',
+          '<p>注意：扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构。</p>\n',
         'en-US':
           '<p>Note: For a flattened data structure, you need to invoke the aggregateTableData method to convert data into data with sublevels to display the tree table structure.</p>\n'
       },
@@ -32,7 +32,7 @@ export default {
       'name': { 'zh-CN': '自定义树表隐藏行', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>表格属性 <code>treeConfig.hideMethod</code> 配置一个方法控制行是否渲染，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>true</code> 则此行隐藏不渲染</p>\n',
+          '<p>表格属性 <code>treeConfig.hideMethod</code> 配置一个方法控制行是否渲染，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>true</code> 则此行隐藏不渲染。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['tree-table/tree-grid-expand-active-method.vue']
@@ -41,7 +41,7 @@ export default {
       'demoId': 'tree-table-tree-grid-operation-column',
       'name': { 'zh-CN': '操作列', 'en-US': 'Operation Column' },
       'desc': {
-        'zh-CN': '<p>列通过配置 type=&quot;radio&quot; 实现单选，配置 type=&quot;selection&quot; 实现多选</p>\n',
+        'zh-CN': '<p>列通过配置 type=&quot;radio&quot; 实现单选，配置 type=&quot;selection&quot; 实现多选。</p>\n',
         'en-US':
           'In the <p> column, you can set type=&quot;radio&quot; to enable single selection and type=&quot;selection&quot; to enable multiple selection</p>\n'
       },
@@ -66,7 +66,7 @@ export default {
       'name': { 'zh-CN': '冻结列', 'en-US': 'Frozen Column' },
       'desc': {
         'zh-CN':
-          '<p>在列的标签上可以通过配置 fixed=&quot;left&quot; 属性把该列固定在左侧，配置 fixed=&quot;right&quot; 属性把该列固定在右侧</p>\n',
+          '<p>在列的标签上可以通过配置 fixed=&quot;left&quot; 属性把该列固定在左侧，配置 fixed=&quot;right&quot; 属性把该列固定在右侧。</p>\n',
         'en-US':
           '<p>On the column label, you can set the fixed=&quot;left&quot; attribute to fix the column on the left, and set the fixed=&quot;right&quot; attribute to fix the column on the right</p>\n'
       },
@@ -108,8 +108,18 @@ export default {
       'demoId': 'tree-table-tree-grid-keyboard-operation',
       'name': { 'zh-CN': '键盘操作', 'en-US': 'Keyboard operation' },
       'desc': {
-        'zh-CN':
-          '<p>键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能\n | Arrow Up ↑ | 移动到高亮行的上一行\n | Arrow Down ↓ | 移动到高亮行的下一行\n | Enter | 展开节点，进入子节点\n | Backspace | 关闭节点，返回到父节点</p>\n',
+        'zh-CN': `
+        <p>键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能。</p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">按键说明：</p>
+          <ul>
+            <li><code>Arrow Up ↑</code>：移动到高亮行的上一行。</li>
+            <li><code>Arrow Down ↓</code>：移动到高亮行的下一行。</li>
+            <li><code>Enter</code>：展开节点，进入子节点。</li>
+            <li><code>Backspace</code>：关闭节点，返回到父节点。</li>
+          </ul>
+        </div>
+        `,
         'en-US':
           '<p>Move the highlighted row, set stripe to false, highlight-hover-row to false, and highlight-current-row to false. Configure the keyboard-config={isArrow: true} attribute to enable the arrow keys function.\n | Arrow Up | Move to the previous line of the highlighted line\n | Arrow Down | Move to the next line of the highlighted line\n | Enter | Expand the node. Enter the child node\n | Backspace | Close the node and return to the parent node</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-validation.js

@@ -29,7 +29,7 @@ export default {
       'name': { 'zh-CN': '数据关联校验', 'en-US': 'Data Association Verification' },
       'desc': {
         'zh-CN':
-          '<p>在自定义校验时，<code>validator</code>方法<code>rule</code>参数中可获取到当前行与列的信息。可以按业务的需求实现数据关联的校验逻辑</p>\n',
+          '<p>在自定义校验时，<code>validator</code>方法<code>rule</code>参数中可获取到当前行与列的信息。可以按业务的需求实现数据关联的校验逻辑。</p>\n',
         'en-US':
           '<p> During customized validation, the <code>validator</code> method <code>rule</code> parameter can obtain the current row and column information. The verification logic of data association can be implemented based on service requirements.</p>\n'
       },
@@ -43,7 +43,7 @@ export default {
       },
       'desc': {
         'zh-CN':
-          '<p>在使用自定义组件时，组件需要实现<code>v-model</code>的功能。在使用插槽时想要实时校验需要手动触发组件的校验方法</p>\n',
+          '<p>在使用自定义组件时，组件需要实现<code>v-model</code>的功能。在使用插槽时想要实时校验需要手动触发组件的校验方法。</p>\n',
         'en-US':
           '<p>When using a custom component, the component needs to implement the <code>v-model</code> function. If you want to verify the slot in real time, you need to manually trigger the verification method of the component.</p>\n'
       },
@@ -101,7 +101,7 @@ export default {
       'name': { 'zh-CN': '错误提示配置项', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>表格默认错误提示显示在 <code>body</code> 上， 可以通过设置 <code>tooltip-config</code> 的 <code>appendTobody</code> 设置为 <code>false</code> 来解决页面滚动时tip位置错误的问题。设置 <code>placement</code> 属性调整默认显示方向。<code>tooltip-config</code> 的配置可参参考 tooltip 组件</p>\n',
+          '<p>表格默认错误提示显示在 <code>body</code> 上， 可以通过设置 <code>tooltip-config</code> 的 <code>appendTobody</code> 设置为 <code>false</code> 来解决页面滚动时tip位置错误的问题。设置 <code>placement</code> 属性调整默认显示方向。<code>tooltip-config</code> 的配置可参参考 tooltip 组件。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['validation/tipconfig.vue']