@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/grid/toolbar/toolbar-op-config.vue

@@ -2,7 +2,7 @@
   <tiny-grid ref="basicGrid" v-bind="op"></tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, Pager, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
@@ -35,7 +35,7 @@ export default {
             },
             {
               code: 'cancel',
-              name: '取消删除'
+              name: '取消选择'
             },
             {
               code: 'save',
@@ -203,6 +203,7 @@ export default {
           if (data.length === 0) {
             Modal.alert('请至少选中一条记录')
           }
+          $grid.removeSelecteds()
           break
         }
         case 'save': {

package/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue

@@ -61,7 +61,7 @@ const toolbarButtons = ref([
   },
   {
     code: 'savePromise',
-    name: '保存（Promise）'
+    name: '保存 Promise'
   },
   {
     code: 'fullValidate',
@@ -178,12 +178,12 @@ function toolbarButtonClickEvent({ code }) {
       basicGridRef.value
         .validate()
         .then(() => {
-          TinyModal.alert('校验成功，触发了then！')
+          TinyModal.alert('校验成功，触发了 then！')
         })
         .catch((error) => {
           // eslint-disable-next-line no-console
           console.log(error)
-          TinyModal.alert('校验不通过，触发了catch')
+          TinyModal.alert('校验不通过，触发了 catch')
         })
       break
     }
@@ -191,12 +191,12 @@ function toolbarButtonClickEvent({ code }) {
       basicGridRef.value
         .fullValidate()
         .then(() => {
-          TinyModal.alert('校验成功，触发了then！')
+          TinyModal.alert('校验成功，触发了 then！')
         })
         .catch((error) => {
           // eslint-disable-next-line no-console
           console.log(error)
-          TinyModal.alert('校验不通过，触发了catch')
+          TinyModal.alert('校验不通过，触发了 catch')
         })
       break
     }

package/demos/pc/app/grid/validation/before-submit-validation.spec.js

@@ -14,6 +14,6 @@ test('提交前校验', async ({ page }) => {
   await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()
 
   await page.getByRole('button', { name: '确认' }).click()
-  await page.getByRole('button', { name: '保存（Promise）' }).click()
-  await expect(page.getByText('校验不通过，触发了catch', { exact: true })).toBeVisible()
+  await page.getByRole('button', { name: '保存 Promise' }).click()
+  await expect(page.getByText('校验不通过，触发了 catch', { exact: true })).toBeVisible()
 })

package/demos/pc/app/grid/validation/before-submit-validation.vue

@@ -63,7 +63,7 @@ export default {
         },
         {
           code: 'savePromise',
-          name: '保存（Promise）'
+          name: '保存 Promise'
         },
         {
           code: 'fullValidate',
@@ -181,12 +181,12 @@ export default {
           this.$refs.basicGrid
             .validate()
             .then(() => {
-              TinyModal.alert('校验成功，触发了then！')
+              TinyModal.alert('校验成功，触发了 then！')
             })
             .catch((error) => {
               // eslint-disable-next-line no-console
               console.log(error)
-              TinyModal.alert('校验不通过，触发了catch')
+              TinyModal.alert('校验不通过，触发了 catch')
             })
           break
         }
@@ -194,12 +194,12 @@ export default {
           this.$refs.basicGrid
             .fullValidate()
             .then(() => {
-              TinyModal.alert('校验成功，触发了then！')
+              TinyModal.alert('校验成功，触发了 then！')
             })
             .catch((error) => {
               // eslint-disable-next-line no-console
               console.log(error)
-              TinyModal.alert('校验不通过，触发了catch')
+              TinyModal.alert('校验不通过，触发了 catch')
             })
           break
         }

package/demos/pc/app/grid/webdoc/grid-appearance-settings.js

@@ -4,7 +4,7 @@ export default {
   demos: [
     {
       'demoId': 'appearance-settings-grid-border',
-      'name': { 'zh-CN': '边框设置', 'en-US': 'Basic Usage' },
+      'name': { 'zh-CN': '边框', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN': '<p>表格属性设置 <code>border</code> 给表格加上边框。</p>\n',
         'en-US': '<p>Table property setting <code>border</code>Adds a border to the table. </p>\n'
@@ -16,7 +16,7 @@ export default {
       'name': { 'zh-CN': '斑马条纹', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)</p>\n',
+          '<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)。</p>',
         'en-US':
           'Whether the <p> <code>stripe</code> has zebra prints is disabled by default. Enabled when <code>:stripe="true" </code> is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.) </p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-context-menu.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '表头菜单', 'en-US': 'Grid-right-click menu-header menu' },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>:context-menu=&quot;{header: {options: headerMenus}, visibleMethod}&quot;</code> 对象来控制表头菜单。\n<code>headerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。\n可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
+          '<p>通过 <code>:context-menu=&quot;{header: {options: headerMenus}, visibleMethod}&quot;</code> 对象来控制表头菜单。<code>headerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@context-menu-click</code> 监控菜单点击事件。</p>',
         'en-US':
           '<p>Configure the <code>:context-menu=&quot;{header: {options: headerMenus}, visibleMethod}&quot;</code> object to control the table header menu. In the \n<code>headerMenus</code>, configure <code>visible</code> whether to display the menu and <code>disabled</code> whether to disable the menu. \n The <code>visibleMethod</code> method can be used to control menu permissions. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
       },
@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '表尾菜单', 'en-US': 'Grid-right-click menu-table tail menu' },
       'desc': {
         'zh-CN':
-          '<p>必须要配置 <code>:context-menu=&quot;{body: {options: bodyMenus}}&quot;</code> ，<code>show-footer</code>，<code>:footer-method=&quot;footerMethod&quot;</code> 才能展示表尾菜单\n配置 <code>:context-menu=&quot;{body: {options: bodyMenus}, footer: {options: footerMenus}，visibleMethod}&quot;</code> 对象来控制表头菜单。\n<code>footerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。\n可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
+          '<p>通过配置 <code>:context-menu=&quot;{body: {options: bodyMenus}}&quot;</code> ，<code>show-footer</code>，<code>:footer-method=&quot;footerMethod&quot;</code> 才能展示表尾菜单。配置 <code>:context-menu=&quot;{body: {options: bodyMenus}, footer: {options: footerMenus}，visibleMethod}&quot;</code> 对象来控制表头菜单。<code>footerMenus</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。可配合 <code>visibleMethod</code> 方法来控制菜单权限。<code>@context-menu-click</code> 监控菜单点击事件。</p>',
         'en-US':
           '<p>The table footer menu can be displayed only when <code>:context-menu=&quot;{body: {options: bodyMenus}}&quot;</code>, show-footer, and <code>:footer-method=&quot;footerMethod&quot;</code> are configured. \nThe <code>:context-menu=&quot;{body: {options: bodyMenus}, footer: {options: footerMenus}, visibleMethod}&;</code> objects are configured to control the table header menu. In the \n<code>footerMenus</code>, configure <code>visible</code> whether to display the menu and <code>disabled</code> whether to disable the menu. \n The <code>visibleMethod</code> method can be used to control menu permissions. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
       },
@@ -29,7 +29,7 @@ export default {
       'name': { 'zh-CN': '单元格菜单', 'en-US': 'Grid-right-click menu-cell menu' },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>context-menu=&quot;{body: {options: bodyMenus}，visibleMethod}&quot;</code> 对象来控制单元格菜单。\n<code>bodyMenus</code> 里面配置 <code>visible</code> 是否显示菜单，<code>disabled</code> 是否禁用菜单项。\n可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@cell-context-menu</code> 监控菜单弹出前事件。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
+          '<p>通过 <code>context-menu=&quot;{body: {options: bodyMenus}，visibleMethod}&quot;</code> 对象来控制单元格菜单。<code>bodyMenus</code> 里面配置 <code>visible</code> 是否显示菜单，<code>disabled</code> 是否禁用菜单项。可配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@cell-context-menu</code> 监控菜单弹出前事件。<code>@context-menu-click</code> 监控菜单点击事件。</p>',
         'en-US':
           '<p>Configure the <code>context-menu=&quot;{body: {options: bodyMenus}, visibleMethod}&quot;</code> object to control the cell menu. In \n<code>bodyMenus</code>, set <code>visible</code> to display menus and <code>disabled</code> to disable menus. \n The <code>visibleMethod</code> method can be used to control menu permissions. Event triggered before the \n<code>@cell-context-menu</code> monitoring menu is displayed. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
       },
@@ -40,7 +40,7 @@ export default {
       'name': { 'zh-CN': '菜单权限', 'en-US': 'Grid-Right-click Menu-Menu Permission' },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>:context-menu=&quot;{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}&quot;</code> 对象来控制表头菜单。\n<code>header，bodyMenus，footer</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。\n使用配合 <code>visibleMethod</code> 方法来控制菜单权限。\n<code>@cell-context-menu</code> 监控菜单弹出前事件。\n<code>@context-menu-click</code> 监控菜单点击事件。\n具体参考下面示例。</p>\n',
+          '<p>通过 <code>:context-menu=&quot;{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}&quot;</code> 对象来控制表头菜单。<code>header，bodyMenus，footer</code> 里面配置 <code>visible</code> 是否显示菜单， <code>disabled</code> 是否禁用菜单项。使用配合 <code>visibleMethod</code> 方法来控制菜单权限。<code>@cell-context-menu</code> 监控菜单弹出前事件。<code>@context-menu-click</code> 监控菜单点击事件。</p>\n',
         'en-US':
           '<p>Configure the <code>:context-menu=&quot;{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}&quot;</code> object to control the table header menu. \n<code>header, bodyMenus, footer</code>: <code>visible</code> indicates whether to display menus and <code>disabled</code> indicates whether to disable menus. \nUse the <code>visibleMethod</code> method to control menu permissions. Event triggered before the \n<code>@cell-context-menu</code> monitoring menu is displayed. \n<code>@context-menu-click</code> monitoring menu click event. \nFor details, see the following example. </p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-custom-style.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '自定义表头样式', 'en-US': 'Set the table header style' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式。或者使用表格列的属性 <code>header-class-name</code> 设置表头单元格样式</p>',
+          '<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式。或者使用表格列的属性 <code>header-class-name</code> 设置表头单元格样式。</p>',
         'en-US':
           '<p>Set the cell and row styles of the table header through <code>header-cell-class-name</code> and <code>header-row-class-name</code></p>\n<h3>Set the cell style of the table header</h3>\n'
       },
@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '自定义表体样式', 'en-US': 'Set Row Style' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>row-class-name</code> 自定义设置表格的行样式</p>\n<p>通过 <code>cell-class-name</code> 自定义设置表格的单元格样式。\n',
+          '<p>通过 <code>row-class-name</code> 自定义设置表格的行样式。</p>\n<p>通过 <code>cell-class-name</code> 自定义设置表格的单元格样式。\n',
         'en-US': '<p>Set the row style of the table by <code>row-class-name</code></p>\n<h3>Set the row style</h3>\n'
       },
       'codeFiles': ['custom-style/body-style.vue']

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

@@ -7,9 +7,9 @@ export default {
       'name': { 'zh-CN': '本地存储列宽', 'en-US': 'Column Width' },
       'desc': {
         'zh-CN':
-          '<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，<code>grid-column</code> 标签上配置 <code>resizable=&quot;false&quot;</code> 可以配置某一列不能调整列宽。并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStroage</code> 里，刷新页面表格的列宽按照拖动后的列宽显示。</p>\n',
+          '<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，<code>grid-column</code> 标签上配置 <code>resizable=&quot;false&quot;</code> 可以配置某一列不能调整列宽。并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStorage</code> 里，刷新页面表格的列宽按照拖动后的列宽显示。</p>\n',
         'en-US':
-          '<p>Configure <code>resizable=&quot;true&quot;</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable=&quot;{storage: true}&quot;</code> on the <code>toolbar</code> tag to save the column width in <code>localStroage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
+          '<p>Configure <code>resizable=&quot;true&quot;</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable=&quot;{storage: true}&quot;</code> on the <code>toolbar</code> tag to save the column width in <code>localStorage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
       },
       'codeFiles': ['custom/column-width.vue']
     },
@@ -31,7 +31,7 @@ export default {
         'zh-CN':
           '<div class="tip custom-block"><p class="custom-block-title">方法说明</p>\n<p> <code>resetResizable()</code>：手动重置列宽拖动的操作，还原到初始状态\n<code>resetCustoms()</code>：手动重置列的显示/隐藏操作，还原到初始状态\n<code>resetAll()</code>：手动重置列的所有操作，还原到初始状态</p>\n</div>\n<p>请先对列宽进行拖动、隐藏列等操作，然后单击对应按钮查看效果。</p>\n',
         'en-US':
-          '<p>Configure <code>sortable</code> on the <code>column</code> label to sort data. (For columns that are not configured, the sorting icon in the personalization panel is hidden.) and configure <code>setting</code> on the <code>toolbar</code> tab to enable personalized settings. Sort the settings in the personalized panel. The sorting results are saved in the local <code>localStroage</code>. Refresh the page. The sorted data is displayed on the page.</p>\n'
+          '<p>Configure <code>sortable</code> on the <code>column</code> label to sort data. (For columns that are not configured, the sorting icon in the personalization panel is hidden.) and configure <code>setting</code> on the <code>toolbar</code> tab to enable personalized settings. Sort the settings in the personalized panel. The sorting results are saved in the local <code>localStorage</code>. Refresh the page. The sorted data is displayed on the page.</p>\n'
       },
       'codeFiles': ['custom/reset-resizable.vue']
     },
@@ -40,7 +40,7 @@ export default {
       'name': { 'zh-CN': '排序', 'en-US': 'Sort Type' },
       'desc': {
         'zh-CN':
-          '<p>在 <code>column</code> 标签上配置 <code>sortable</code> 可以排序（未配置的列，在个性化面板中的排序图标会隐藏），并在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里进行排序，排序过后会保存在本地的 <code>localStroage</code> 里，刷新页面页面上会显示排序过后的数据。</p>\n',
+          '<p>在 <code>column</code> 标签上配置 <code>sortable</code> 可以排序（未配置的列，在个性化面板中的排序图标会隐藏），并在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里进行排序，排序过后会保存在本地的 <code>localStorage</code> 里，刷新页面页面上会显示排序过后的数据。</p>\n',
         'en-US':
           '<p>Configure <code>sortable</code> on the <code>column</code> tab to enable sorting, and configure <code>setting</code> on the <code>toolbar</code> tab to enable personalized settings. In the Personalization panel, select Other Settings. In Other Settings, you can select the sorting type. The sorting type includes the sorting on the current page and sorting on all data. The default value is Sort on the current page.</p>\n'
       },
@@ -79,22 +79,6 @@ export default {
       },
       'codeFiles': ['custom/column-fixed.vue']
     },
-    {
-      'demoId': 'custom-ordercolumn-local',
-      'name': {
-        'zh-CN': '个性化按钮点击事件',
-        'en-US': 'Local Record and Personalization Panel Button Click Event Listening'
-      },
-      'desc': {
-        'zh-CN': `<p>配置 <code>setting</code> 的 <code>storage</code> 为 <code>local</code> 可实个性化的本地存储，
-          配置 <code>setting</code> 的 <code>sortable</code> 为 <code>sortablejs</code> 可实现拖拽排序列功能，此功能在多级列头下无效，
-          并且可以通过三个事件<code>save-setting</code>、<code>cancel-setting</code>、<code>reset-setting</code>来分别监听确认、取消、重置按钮的点击事件。</p>\n`,
-        'en-US': `<p>Configure <code>storage</code> of <code>setting</code> to <code>local</code> as a personalized local storage,
-          Set <code>sortable</code> of <code>setting</code> to <code>sortablejs</code> to implement the drag-and-drop sorting function. This function is invalid in multi-level column headers,
-          In addition, three events <code>save-setting</code>, <code>cancel-setting</code>, and <code>reset-setting</code> can be used to listen to the click events of the confirmation, cancellation, and reset buttons.</p>\n`
-      },
-      'codeFiles': ['custom/ordercolumn-local.vue']
-    },
     {
       'demoId': 'custom-ordercolumn-remote',
       'name': { 'zh-CN': '加载远端数据', 'en-US': 'Display and hide columns' },
@@ -127,17 +111,6 @@ export default {
       },
       'codeFiles': ['custom/hide-column.vue']
     },
-    {
-      'demoId': 'custom-prsonalized-drag',
-      'name': { 'zh-CN': '个性化面板拖拽前事件', 'en-US': 'Number of records on each page' },
-      'desc': {
-        'zh-CN':
-          '<p>在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里配置 <code>onBeforeMove</code> 拖拽前事件，也可配置 <code>filter</code> 设置类名， 拖拽个性化面板某一行会触发个性化面板的拖拽前事件。</p>\n',
-        'en-US':
-          '<p>On the <code>toolbar</code> tab, configure <code>setting</code> to enable personalized settings. In the personalized panel, select other settings. You can select the number of records to be displayed on each page. You can use the <code>other</code> attribute of <code>setting</code> to control the display of other settings. The default value of <code>boolean</code> is <code>true</code></p>\n'
-      },
-      'codeFiles': ['custom/prsonalized-drag.vue']
-    },
     {
       'demoId': 'custom-page-size',
       'name': { 'zh-CN': '分页条数', 'en-US': 'Local Storage' },
@@ -169,6 +142,33 @@ export default {
         'en-US': ''
       },
       'codeFiles': ['custom/reset-method.vue']
+    },
+    {
+      'demoId': 'custom-ordercolumn-local',
+      'name': {
+        'zh-CN': '个性化按钮点击事件',
+        'en-US': 'Local Record and Personalization Panel Button Click Event Listening'
+      },
+      'desc': {
+        'zh-CN': `<p>配置 <code>setting</code> 的 <code>storage</code> 为 <code>local</code> 可实个性化的本地存储，
+          配置 <code>setting</code> 的 <code>sortable</code> 为 <code>sortablejs</code> 可实现拖拽排序列功能，此功能在多级列头下无效，
+          并且可以通过三个事件<code>save-setting</code>、<code>cancel-setting</code>、<code>reset-setting</code>来分别监听确认、取消、重置按钮的点击事件。</p>\n`,
+        'en-US': `<p>Configure <code>storage</code> of <code>setting</code> to <code>local</code> as a personalized local storage,
+          Set <code>sortable</code> of <code>setting</code> to <code>sortablejs</code> to implement the drag-and-drop sorting function. This function is invalid in multi-level column headers,
+          In addition, three events <code>save-setting</code>, <code>cancel-setting</code>, and <code>reset-setting</code> can be used to listen to the click events of the confirmation, cancellation, and reset buttons.</p>\n`
+      },
+      'codeFiles': ['custom/ordercolumn-local.vue']
+    },
+    {
+      'demoId': 'custom-prsonalized-drag',
+      'name': { 'zh-CN': '个性化面板拖拽前事件', 'en-US': 'Number of records on each page' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里配置 <code>onBeforeMove</code> 拖拽前事件，也可配置 <code>filter</code> 设置类名， 拖拽个性化面板某一行会触发个性化面板的拖拽前事件。</p>\n',
+        'en-US':
+          '<p>On the <code>toolbar</code> tab, configure <code>setting</code> to enable personalized settings. In the personalized panel, select other settings. You can select the number of records to be displayed on each page. You can use the <code>other</code> attribute of <code>setting</code> to control the display of other settings. The default value of <code>boolean</code> is <code>true</code></p>\n'
+      },
+      'codeFiles': ['custom/prsonalized-drag.vue']
     }
   ],
   apis: [{ 'name': 'grid-custom', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '拖拽控制', 'en-US': 'Drag Control' },
       'desc': {
         'zh-CN':
-          '<p>可以通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，配置<code>drop-config</code> 的 <code>trigger</code> 来指定拖拽的触发源（一般是 <code>class</code> 类名），也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
+          '<p>通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，配置<code>drop-config</code> 的 <code>trigger</code> 来指定拖拽的触发源（一般是 <code>class</code> 类名），也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
         'en-US':
           '<p>You can set the <code>onBeforeMove</code> event of <code>drop-config</code> to control row dragging. You can also configure <code>filter</code> of <code>drop-config</code> in conjunction with a custom style to restrict drag</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-dynamically-columns.js

@@ -8,7 +8,10 @@ export default {
         'zh-CN': '根据日期动态生成列',
         'en-US': 'Grid-Dynamic column generation based on the selected date'
       },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '根据日期范围选择框的日期范围动态的生成表格列。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['dynamically-columns/dynamically-columns.vue']
     },
     {

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

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
       'desc': {
         'zh-CN': `
-        <p> <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。具体参考下面示例。</p>
+        <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">说明</p>
           <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
@@ -23,7 +23,7 @@ export default {
       'name': { 'zh-CN': '自定义编辑器', 'en-US': 'Introducing the TINY component as the editor' },
       'desc': {
         'zh-CN': `
-        <p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者TinyVue提供的组件。</p>
+        <p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。</p>
         `,
         'en-US':
           '<p>Introduces the TinyVue <code>Select</code> component through <code>attribute configuration</code>. </p>\n'

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

@@ -16,7 +16,10 @@ export default {
     {
       'demoId': 'empty-empty-data-default-tip',
       'name': { 'zh-CN': '默认提示', 'en-US': 'Default Prompt' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '默认情况下就展示表格组件的默认提示图标和文字。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['empty/empty-data-default-tip.vue']
     },
     {

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

@@ -7,8 +7,8 @@ export default {
       'name': { 'zh-CN': '展开行', 'en-US': 'Check whether the row is expanded.' },
       'desc': {
         'zh-CN': `
-        <p>在 column 标签上配置 type=&quot;expand&quot; 展开行,可以通过 v-slot 插槽插入需要的模板信息</p>
-        <p>通过调用 <code>hasRowExpand(row)</code> 方法可以检查行是否已展开，参数 row 为行数据对象。</p>
+        <p>在 <code>column</code> 标签上配置 <code>type=&quot;expand&quot</code>; 展开行,可以通过 <code>v-slot</code> 插槽插入需要的模板信息</p>
+        <p>通过调用 <code>hasRowExpand(row)</code> 方法可以检查行是否已展开，参数 <code>row</code> 为行数据对象。</p>
         `,
         'en-US':
           '<p>You can invoke the <code>hasRowExpand(row)</code> method to check whether a row is expanded. The row parameter is the row data object. </p>\n'
@@ -21,7 +21,7 @@ export default {
       'desc': {
         'zh-CN': `
         <p>表格属性 <code>expand-config</code> 设置展开行配置项。</p>
-        <p>表格属性 <code>expandConfig.activeMethod</code> 配置一个方法控制行是否可展开，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>false</code> 则此行不可展开，且不显示展开图标</p>
+        <p>表格属性 <code>expandConfig.activeMethod</code> 配置一个方法控制行是否可展开，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>false</code> 则此行不可展开，且不显示展开图标。</p>
         <p>表格属性 <code>expandConfig.showIcon</code> 配置是否显示展开图标，默认为 <code>true</code> 表示显示展开图标。
         `,
         'en-US': '<p>Table property<code>expand-config</code>Set the configuration item of the expanded line. </p>\n'

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

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '表格列头与单元格错位', 'en-US': 'Table column headers and cells are misplaced' },
       'desc': {
         'zh-CN':
-          '<p>当出现grid表头与表体单元格错位时，可以选择性地做以下尝试\n1.给每列设置列宽\n2.将<code>show-overflow</code>、<code>show-header-overflow</code> 都设置为 <code>true</code>\n3.将 <code>table-layout</code> 设置为 <code>auto</code>。</p>\n',
+          '<p>当出现 <code>grid</code> 表头与表体单元格错位时，可以选择性地做以下尝试。1.给每列设置列宽。2.将<code>show-overflow</code>、<code>show-header-overflow</code> 都设置为 <code>true</code>。3.将 <code>table-layout</code> 设置为 <code>auto</code>。</p>',
         'en-US':
           '<p>When the grid table header is misplaced with the table body cell, You can perform the following operations as required.\n1. Set the column width for each column.\n2. Set <code>show-overflow</code> and <code>show-header-overflow</code> to <code>true</code>\n3. Set <code>table-layout</ Set this parameter to <code>auto</code></p>\n'
       },
@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '弹窗中的表格编辑器无法正常失焦', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>当可以编辑的表格出现在DialogBox弹出框中，编辑器无法正常失去焦点时需要配置<code>blurOutside</code>。</p>\n',
+          '<p>当可以编辑的表格出现在 <code>DialogBox</code>弹出框中，编辑器无法正常失去焦点时需要配置 <code>blurOutside</code>。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['faq/grid-in-dialog-box.vue']
@@ -26,7 +26,7 @@ export default {
     {
       'demoId': 'faq-op-slot',
       'name': { 'zh-CN': '配置式表格如何使用插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>具体可以参考以下代码：</p>\n', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>通过表格列属性的 <code>slots</code> 属性对象配置对应的插槽。</p>', 'en-US': '' },
       'codeFiles': ['faq/op-slot.vue']
     },
     {
@@ -34,7 +34,7 @@ export default {
       'name': { 'zh-CN': '列默认插槽中不建议使用 Tooltip 或 Poppover', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>因为在表格渲染时，列的默认插槽会执行很多次，在数据量大的场景下，会因为创建大量 Tooltip 实例而产生性能问题，也有其他状态共享问题。\n所以建议使用表格内置 Tooltip，参考示例中城市字段，参考【Tip 提示】章节。</p>\n',
+          '<p>因为在表格渲染时，列的默认插槽会执行很多次，在数据量大的场景下，会因为创建大量 <code>Tooltip</code> 实例而产生性能问题，也有其他状态共享问题。所以建议使用表格内置 <code>Tooltip</code>，参考示例中城市字段，参考【Tip 提示】章节。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['faq/many-poppover.vue']

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

@@ -31,7 +31,7 @@ export default {
       'demoId': 'filter-dynamic-filter',
       'name': { 'zh-CN': '动态改变筛选项', 'en-US': 'Filter' },
       'desc': {
-        'zh-CN': `<p>通过改变自定义的 <code>filter</code> 自定义筛选的规则中的 <code>values</code> 数组，或者将 <code>values</code> 定义成方法可以动态的返回筛选项`,
+        'zh-CN': `<p>通过改变自定义的 <code>filter</code> 自定义筛选的规则中的 <code>values</code> 数组，或者将 <code>values</code> 定义成方法可以动态的返回筛选项。`,
         'en-US': ''
       },
       'codeFiles': ['filter/dynamic-filter.vue']
@@ -41,7 +41,7 @@ export default {
       'name': { 'zh-CN': '简化版筛选-单选/多选菜单', 'en-US': 'Custom Parameter' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>layout</code> 设置需要使用的筛选项为<code>simple</code>,其中<code>layout</code>可选项包括<code>input,enum,default,extends,base,simple</code></p>\n',
+          '<p>通过 <code>layout</code> 设置需要使用的筛选项为<code>simple</code>,其中<code>layout</code>可选项包括<code>input,enum,default,extends,base,simple</code> 。</p>\n',
         'en-US': '<p>Add custom parameters by <code>params</code>。</p>\n'
       },
       'codeFiles': ['filter/simple-filter.vue']
@@ -71,14 +71,14 @@ export default {
       'name': { 'zh-CN': '过滤高级设置', 'en-US': 'Custom Filter' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>inputFilter</code> 可以给input过滤区域配置自定义组件与条件，通过 <code>extends</code> 可以增加快捷过滤列表。</p>\n',
+          '<p>通过 <code>inputFilter</code> 可以给 <code>input</code> 过滤区域配置自定义组件与条件，通过 <code>extends</code> 可以增加快捷过滤列表。</p>',
         'en-US': '<p>Set additional parameters through the <code>params</code> attribute</p>\n'
       },
       'codeFiles': ['filter/advanced-filter.vue']
     },
     {
       'demoId': 'filter-custom-filter',
-      'name': { 'zh-CN': '设置列筛选规则', 'en-US': 'Server Filter' },
+      'name': { 'zh-CN': '列筛选规则', 'en-US': 'Server Filter' },
       'desc': {
         'zh-CN': '<p>通过 <code>filter</code> 属性设置列筛选规则。</p>\n',
         'en-US':

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

@@ -13,7 +13,7 @@ export default {
     },
     {
       'demoId': 'footer-configuration-summary',
-      'name': { 'zh-CN': '设置配置式的统计', 'en-US': 'Set Profile Statistics' },
+      'name': { 'zh-CN': '配置式的统计', 'en-US': 'Set Profile Statistics' },
       'desc': {
         'zh-CN': '<p>通过 <code>summary-config</code> 设置配置式的统计。</p>\n',
         'en-US': '<p>Set the profile statistics using <code>summary-config</code>. </p>\n'

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

@@ -15,7 +15,7 @@ export default {
     },
     {
       'demoId': 'highlight-set-current-row',
-      'name': { 'zh-CN': '设置指定行高亮', 'en-US': 'Highlight a specified line' },
+      'name': { 'zh-CN': '指定行高亮', 'en-US': 'Highlight a specified line' },
       'desc': {
         'zh-CN': '<p> <code>setCurrentRow(row)</code> 可设置某一行为高亮状态。</p>\n',
         'en-US': 'The <p> <code>setCurrentRow(row)</code> can be used to set the highlight status of a line. </p>\n'
@@ -27,7 +27,7 @@ export default {
       'name': { 'zh-CN': '开启选中行高亮', 'en-US': 'Enable the selected row to be highlighted' },
       'desc': {
         'zh-CN':
-          '<p>设置 <code>highlight-current-row</code> 属性控制鼠标选中行是否开启高亮</p>\n<p>\n带有斑马线的行无高亮效果。\n</p>\n',
+          '<p>设置 <code>highlight-current-row</code> 属性控制鼠标选中行是否开启高亮。</p>\n<p>\n带有斑马线的行无高亮效果。\n</p>\n',
         'en-US':
           '<p>Set the <code>highlight-current-row</code> attribute to control whether to highlight selected lines.</p>\n<p>\nThe lines with zebra crossings are not highlighted.\n</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-import-export.js

@@ -4,8 +4,11 @@ export default {
   demos: [
     {
       'demoId': 'import-export-export-excel',
-      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': '表格导出功能', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN': '<p>调用表格的 <code>exportCsv</code> 方法导出表格数据。</p>',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['import-export/export-excel.vue']
     }
   ],

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

@@ -15,11 +15,12 @@ export default {
             <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>`,
+        </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']

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

@@ -34,7 +34,7 @@ export default {
     },
     {
       'demoId': 'mouse-keyboard-keyboard-config',
-      'name': { 'zh-CN': '设置按键配置项', 'en-US': 'Set key configuration items' },
+      'name': { 'zh-CN': '按键配置项', 'en-US': 'Set key configuration items' },
       'desc': {
         'zh-CN': '<p>表格属性 <code>keyboard-config</code> 设置按键配置项。\n</p>\n',
         'en-US': '<p>Table property<code>keyboard-config</code>Set key configuration items. \n</p>\n'
@@ -43,7 +43,7 @@ export default {
     },
     {
       'demoId': 'mouse-keyboard-mouse-config',
-      'name': { 'zh-CN': '设置鼠标配置项', 'en-US': 'Setting Mouse Configuration Items' },
+      'name': { 'zh-CN': '鼠标配置项', 'en-US': 'Setting Mouse Configuration Items' },
       'desc': {
         'zh-CN': '<p>表格属性 <code>mouse-config</code> 设置鼠标配置项。\n</p>\n',
         'en-US': '<p>Table property<code>mouse-config</code>Set the mouse configuration item. \n</p>\n'

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

@@ -15,8 +15,17 @@ export default {
       'demoId': 'pager-inner-pager',
       '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",
+        'zh-CN': `<p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">第三方分页组件配置步骤：</p>
+          <ul>
+            <li> 1、<code>import</code> 引入自定义的分页组件（这里使用官方的分页组件示范） <code>Pager</code> 组件，即 <code>import Pager from '@opentiny/vue-pager'</code> 或者 <code>{ Pager } from '@opentiny/vue'</code> 。</li>
+            <li>2、<code>Pager</code> 传入给 <code>data()</code> 函数存储起来以便模板中使用。</li>
+            <li>3、表格属性设置 <code>pager</code> 进行分页相关配置，通过 <code>pager</code> 的属性 <code>{component: Pager}</code> 注入分页组件。</li>
+            <li>4、配置 seq-serial 属性可以设置翻页后序号连续显示，默认是不连续显示的。</li>
+          </ul>
+        </div>
+      `,
         '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'
       },