@opentiny/vue-docs 2.1.7 → 2.1.9

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

@@ -3,37 +3,37 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'align-header-align-left-header-align',
+      'demoId': 'align-header-align',
       'name': { 'zh-CN': '表头对齐', 'en-US': 'aligned table header' },
       'desc': {
         'zh-CN':
-          '<p><code>header-align</code> 设置表头对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>header-align</code> 会被列配置的 <code>header-align</code> 覆盖</p>\n</div>\n',
+          '<p> <code>header-align</code> 设置表头对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>header-align</code> 会被列配置的 <code>header-align</code> 覆盖</p>\n</div>\n',
         'en-US':
-          '<p><code>header-align</code> Sets the table header alignment mode. The value can be <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>header-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be overwritten by <code>header-align</code> configured in the column </p>\n</div>\n'
+          '<p> <code>header-align</code> Sets the table header alignment mode. The value can be <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>header-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be overwritten by <code>header-align</code> configured in the column </p>\n</div>\n'
       },
-      'codeFiles': ['align/header-align/header-align.vue']
+      'codeFiles': ['align/header-align.vue']
     },
     {
-      'demoId': 'align-footer-align-left-footer-align',
+      'demoId': 'align-footer-align',
       'name': { 'zh-CN': '表尾对齐', 'en-US': 'Left-aligned table tail' },
       'desc': {
         'zh-CN':
-          '<p><code>footer-align</code> 设置表尾对齐方式的可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>footer-align</code> 会被列配置的 <code>footer-align</code> 覆盖</p>\n</div>\n',
+          '<p> <code>footer-align</code> 设置表尾对齐方式的可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>footer-align</code> 会被列配置的 <code>footer-align</code> 覆盖</p>\n</div>\n',
         'en-US':
-          'The value of <p><code>footer-align</code> is <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>footer-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be replaced by <code>footer-align</code> configured in the column </p>\n</div>\n'
+          'The value of <p> <code>footer-align</code> is <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>footer-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be replaced by <code>footer-align</code> configured in the column </p>\n</div>\n'
       },
-      'codeFiles': ['align/footer-align/footer-align.vue']
+      'codeFiles': ['align/footer-align.vue']
     },
     {
-      'demoId': 'align-grid-align-left-grid-align',
+      'demoId': 'align-grid-align',
       'name': { 'zh-CN': '表格对齐', 'en-US': 'Left-aligned table' },
       'desc': {
         'zh-CN':
-          '<p><code>align</code> 设置全部列对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格设置对齐方式优先级最低，会被单独设置对齐方式覆盖</p>\n</div>\n',
+          '<p> <code>align</code> 设置全部列对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格设置对齐方式优先级最低，会被单独设置对齐方式覆盖</p>\n</div>\n',
         'en-US':
-          '<p><code>align</code> Sets the alignment mode of all columns. The options are <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table has the lowest priority. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will overwrite the </p>\n</div>\n'
+          '<p> <code>align</code> Sets the alignment mode of all columns. The options are <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table has the lowest priority. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will overwrite the </p>\n</div>\n'
       },
-      'codeFiles': ['align/grid-align/grid-align.vue']
+      'codeFiles': ['align/grid-align.vue']
     }
   ],
   apis: [{ 'name': 'grid-align', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]

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

@@ -0,0 +1,27 @@
+export default {
+  column: '1',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'appearance-settings-grid-border',
+      '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'
+      },
+      'codeFiles': ['appearance-settings/grid-border.vue']
+    },
+    {
+      'demoId': 'appearance-settings-stripe',
+      'name': { 'zh-CN': '斑马条纹', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN':
+          '<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)</p>\n',
+        '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'
+      },
+      'codeFiles': ['appearance-settings/stripe.vue']
+    }
+  ],
+  apis: [{ 'name': 'grid-appearance-settings', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+}

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

@@ -3,48 +3,48 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'grid_Example-shortcutMenu-header-menu',
-      'name': { 'zh-CN': 'Grid-右键菜单-表头菜单', 'en-US': 'Grid-right-click menu-header menu' },
+      'demoId': 'context-menu-header-menu',
+      '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',
         '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'
       },
-      'codeFiles': ['grid_Example/shortcutMenu/header-menu.vue']
+      'codeFiles': ['context-menu/header-menu.vue']
     },
     {
-      'demoId': 'grid_Example-shortcutMenu-footer-menu',
-      'name': { 'zh-CN': 'Grid-右键菜单-表尾菜单', 'en-US': 'Grid-right-click menu-table tail menu' },
+      'demoId': 'context-menu-footer-menu',
+      '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> 才能展示表尾菜单\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',
         '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'
       },
-      'codeFiles': ['grid_Example/shortcutMenu/footer-menu.vue']
+      'codeFiles': ['context-menu/footer-menu.vue']
     },
     {
-      'demoId': 'grid_Example-shortcutMenu-cell-menu',
-      'name': { 'zh-CN': 'Grid-右键菜单-单元格菜单', 'en-US': 'Grid-right-click menu-cell menu' },
+      'demoId': 'context-menu-cell-menu',
+      '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',
         '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'
       },
-      'codeFiles': ['grid_Example/shortcutMenu/cell-menu.vue']
+      'codeFiles': ['context-menu/cell-menu.vue']
     },
     {
-      'demoId': 'grid_Example-shortcutMenu-menu-permissions',
-      'name': { 'zh-CN': 'Grid-右键菜单-菜单权限', 'en-US': 'Grid-Right-click Menu-Menu Permission' },
+      'demoId': 'context-menu-menu-permissions',
+      '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',
         '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'
       },
-      'codeFiles': ['grid_Example/shortcutMenu/menu-permissions.vue']
+      'codeFiles': ['context-menu/menu-permissions.vue']
     }
   ],
   apis: [{ 'name': 'grid-context-menu', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]

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

@@ -3,68 +3,45 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'custom-style-row-style',
-      'name': { 'zh-CN': '设置行样式', 'en-US': 'Set Row Style' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>row-class-name</code> 自定义设置表格的行样式</p>\n<h3>设置行样式</h3>\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/row-style.vue']
-    },
-    {
-      'demoId': 'custom-style-header-style-header-cell-style',
-      'name': { 'zh-CN': '设置表头样式', 'en-US': 'Set the table header style' },
+      'demoId': 'custom-style-header-style',
+      '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> 设置表头的单元格和行样式</p>\n<h3>设置表头单元格样式</h3>\n',
         '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'
       },
-      'codeFiles': ['custom-style/header-style/header-cell-style.vue']
+      'codeFiles': ['custom-style/header-style.vue']
     },
     {
-      'demoId': 'custom-style-header-style-header-row-style',
-      'name': { 'zh-CN': '设置表头单元格样式', 'en-US': 'Set the table header cell style' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['custom-style/header-style/header-row-style.vue']
+      'demoId': 'custom-style-body-style',
+      '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',
+        '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']
     },
     {
-      'demoId': 'custom-style-footer-style-footer-cell-style',
-      'name': { 'zh-CN': '表尾样式(自定义表尾行样式)', 'en-US': 'Table tail style (customized table tail row style)' },
+      'demoId': 'custom-style-footer-style',
+      'name': { 'zh-CN': '自定义表尾样式', 'en-US': 'Table tail style (customized table tail row style)' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式</p>\n',
         'en-US':
           '<p>Use <code>footer-cell-class-name</code> and <code>footer-row-class-name</code> to set the cell and row styles at the end of the table</p>\n'
       },
-      'codeFiles': ['custom-style/footer-style/footer-cell-style.vue']
-    },
-    {
-      'demoId': 'custom-style-footer-style-footer-row-style',
-      'name': {
-        'zh-CN': '表尾样式(自定义表尾单元格样式)',
-        'en-US': 'Table tail style (customized table tail cell style)'
-      },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['custom-style/footer-style/footer-row-style.vue']
-    },
-    {
-      'demoId': 'custom-style-cell-style',
-      'name': { 'zh-CN': '单元格样式', 'en-US': 'Cell Style' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>cell-class-name</code> 自定义设置表格的单元格样式</p>\n',
-        'en-US': '<p>Set the cell style of the table by <code>cell-class-name</code></p>\n'
-      },
-      'codeFiles': ['custom-style/cell-style.vue']
+      'codeFiles': ['custom-style/footer-style.vue']
     },
     {
-      'demoId': 'column-class-name',
-      'name': { 'zh-CN': '列样式', 'en-US': 'Column Style' },
+      'demoId': 'custom-style-class-name',
+      'name': { 'zh-CN': '自定义列样式', 'en-US': 'Column Style' },
       'desc': {
         'zh-CN': '<p>通过 <code>class-name</code> 自定义设置表格的列样式</p>\n',
         'en-US': '<p>Set the column style of the table by <code>class-name</code></p>\n'
       },
-      'codeFiles': ['column/class-name.vue']
+      'codeFiles': ['custom-style/class-name.vue']
     }
   ],
   apis: [{ 'name': 'grid-custom-style', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]

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

@@ -0,0 +1,175 @@
+export default {
+  column: '1',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'custom-column-width',
+      'name': { 'zh-CN': '本地存储列宽', 'en-US': 'Column Width' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStroage</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'
+      },
+      'codeFiles': ['custom/column-width.vue']
+    },
+    {
+      'demoId': 'custom-column-simple',
+      'name': { 'zh-CN': '简化版列设置', 'en-US': 'Manually Reset Columns' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>toolbar</code> 标签上配置 <code>:setting=&quot;{simple: true, customDisable: customDisable}&quot;</code> 开启简化版列设置 通过<code>customDisable</code> 方法自定义当前选项是否禁用</p>\n',
+        'en-US':
+          'Description of the <div class="tip custom-block"><p class="custom-block-title"> method </p>\n<p> <code>resetResizable()</code>: Manually reset the column width and drag the operation to the initial state \n<code>resetCustoms()</code>: Manually reset the display/hide operation of the column to the initial state.\n<code>resetAll()</code>: Manually reset all operations of the column. Restore to the initial state </p>\n</div>\n<p> Drag the column width or hide the column, and then click the corresponding button to view the effect. </p>\n'
+      },
+      'codeFiles': ['custom/column-simple.vue']
+    },
+    {
+      'demoId': 'custom-reset-resizable',
+      'name': { 'zh-CN': '手动重置列操作', 'en-US': 'Sort' },
+      'desc': {
+        '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'
+      },
+      'codeFiles': ['custom/reset-resizable.vue']
+    },
+    {
+      'demoId': 'custom-column-sort',
+      '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',
+        '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'
+      },
+      'codeFiles': ['custom/column-sort.vue']
+    },
+    {
+      'demoId': 'custom-multiple-column-sort',
+      'name': { 'zh-CN': '多列排序', 'en-US': 'Multi-column sorting' },
+      'desc': {
+        'zh-CN': `<p> <code>表头排序</code> 只支持单列排序，<code>个性化排序</code> 可以通过配置 <code>sortConfig.multipleColumnSort</code> 开启多列排序，
+          <code>sortConfig.multipleColumnSort</code> 支持配置为 <code>true</code> 或者 <code>方法</code>，配置为方法时可以自定义多列排序。</p>\n`,
+        'en-US': `<p> <code>Table header sorting</code> supports only single-column sorting. <code>Personalized sorting</code>You can configure <code>sortConfig.multipleColumnSort</code> to enable multi-column sorting,
+          <code>sortConfig.multipleColumnSort</code> can be set to <code>true</code> or <code>method</code>. When this parameter is set to a method, you can customize multi-column sorting. </p>\n`
+      },
+      'codeFiles': ['custom/multiple-column-sort.vue']
+    },
+    {
+      'demoId': 'custom-sort-type',
+      'name': { 'zh-CN': '排序类型', 'en-US': 'Column Freeze' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>column</code> 标签上配置 <code>sortable</code> 可以排序，并在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里选择其它设置，其它设置里可以选择排序类型，排序类型有当前页排序和所有数据排序选项，默认是当前页排序</p>\n',
+        'en-US':
+          '<p>Configure the <code>fixed=&quot;left&quot;</code> on the <code>column</code> tag to be fixed on the left, and configure <code>setting</code> on the <code>toolbar</code> tag to enable personalized settings. In the personalized panel, you can set whether the column is fixed.</p>\n'
+      },
+      'codeFiles': ['custom/sort-type.vue']
+    },
+    {
+      'demoId': 'custom-column-fixed',
+      'name': { 'zh-CN': '列冻结', 'en-US': 'Local Records' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>column</code> 标签上配置 <code>fixed=&quot;left&quot;</code> 可以固定在左侧，并在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里可以设置是否固定列</p>\n',
+        'en-US':
+          '<p>Set <code>sortable</code> of <code>setting</code> to <code>sortablejs</code> to implement the drag-and-drop sorting function. This function is invalid under multi-level column headers</p>\n'
+      },
+      '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' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>reloadCustoms</code> 方法，将第二个参数置为 <code>true</code> 可按序加载列</p>\n',
+        'en-US':
+          '<p>Configure <code>setting</code> on the <code>toolbar</code> tab to enable personalized settings. In the personalized panel, you can set whether to display or hide columns</p>\n'
+      },
+      'codeFiles': ['custom/ordercolumn-remote.vue']
+    },
+    {
+      'demoId': 'custom-column-visible-hidden',
+      'name': { 'zh-CN': '列显示隐藏', 'en-US': 'Manually hide the displayed column' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里可以设置是否显示和隐藏列</p>\n',
+        'en-US':
+          '<p>Invoke the <code>hideColumn(column)</code> method to hide the specified column, and the <code>showColumn(column)</code> method to display the specified column. When you use the two methods to hide or display a column, you need to invoke the <code>refreshColumn()</code> method to refresh the column configuration for the modification to take effect. </p>\n'
+      },
+      'codeFiles': ['custom/column-visible-hidden.vue']
+    },
+    {
+      'demoId': 'custom-hide-column',
+      'name': { 'zh-CN': '手动隐藏显示列', 'en-US': 'Event triggered before dragging the personalized panel' },
+      'desc': {
+        'zh-CN':
+          '<p>通过调用 <code>hideColumn(column)</code> 方法隐藏指定列，<code>showColumn(column)</code> 方法显示指定列。使用这两个方法隐藏/显示列时，还需要再调用 <code>refreshColumn()</code> 方法刷新列配置才能实际生效。</p>\n',
+        'en-US':
+          '<p>Configure <code>setting</code> on the <code>toolbar</code> tab to enable personalized settings, and configure the <code>onBeforeMove</code> event before dragging on the personalized panel. You can also configure <code>filter</code> to set the class name. If you drag a line on the personalized panel, the event before dragging the personalized panel is triggered. </p>\n'
+      },
+      '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' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>toolbar</code> 标签上配置 <code>setting</code> 开启个性化设置，在个性化面板里选择其它设置，其它设置里可以选择每页显示的条数，可以通过 <code>setting</code> 的 <code>other</code> 属性控制显示其他设置，<code>boolean</code> 类型默认为 <code>true</code></p>\n',
+        'en-US':
+          '<p>Configure <code>:setting=&quot;{storage:\'local\'}&quot; on the <code>toolbar</code> tag </code>Enable personalization and save to local <code>localSotrage</code> </p>\n<div class="danger custom-block">\n</div>\n'
+      },
+      'codeFiles': ['custom/page-size.vue']
+    },
+    {
+      'demoId': 'custom-server-storage',
+      'name': { 'zh-CN': '服务端存储', 'en-US': '' },
+      'desc': {
+        'zh-CN': `
+        <p>在 <code>toolbar</code> 标签上配置 <code>:setting=&quot;{storage:'remote'}&quot;</code> 开启个性化并启用远程服务获取个性化数据，并配置 <code>@remote-setting</code> 调用 <code>reloadCustoms</code> 方法更新个性化数据。
+         注意:如果是根据服务端数据控制显示/隐藏列，调用接口获取到个性化的数据后需手动调用 <code>reloadCustoms</code> 方法更新。</p>`,
+        'en-US': ''
+      },
+      'codeFiles': ['custom/server-storage.vue']
+    },
+    {
+      'demoId': 'custom-reset-method',
+      'name': { 'zh-CN': '自定义重置', 'en-US': '' },
+      'desc': {
+        'zh-CN':
+          '<p>通过工具栏属性 <code>reset-method</code>  配置一个方法，在重置个性化时调用，需要返回 <code>promise</code>，指定重置的个性化数据，参考示例：',
+        'en-US': ''
+      },
+      'codeFiles': ['custom/reset-method.vue']
+    }
+  ],
+  apis: [{ 'name': 'grid-custom', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+}

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

@@ -3,26 +3,26 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'tiny-first-menu-static-data',
+      'demoId': 'data-source-static-data',
       'name': { 'zh-CN': '绑定静态数据', 'en-US': 'Bound static data' },
       'desc': {
         'zh-CN': '<p>表格属性设置 <code>data</code> 开启双向绑定静态数据。</p>\n',
         'en-US': '<p>Table attribute setting<code>data</code>Enable bidirectional binding of static data. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/static-data.vue']
+      'codeFiles': ['data-source/static-data.vue']
     },
     {
-      'demoId': 'tiny-first-menu-request-service',
+      'demoId': 'data-source-request-service',
       'name': { 'zh-CN': '开启服务请求', 'en-US': 'Open Service Request' },
       'desc': {
         'zh-CN':
           "<p>表格属性设置 fetch-data 开启服务请求。表格首次加载服务数据的时机默认是在 mounted 阶段，如果开了 prefetch 开关就在 created 阶段开始加载。可以设置 prefetch 为数组，指定后端排序字段参数，作为数据接口方法参数 sortBy。例如：[{ property: 'name', order: 'desc' }]，参考示例</p>\n",
         'en-US': '<p>Table attribute setting <code>fetch-data</code> enables the service request. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/request-service.vue']
+      'codeFiles': ['data-source/request-service.vue']
     },
     {
-      'demoId': 'tiny-first-menu-auto-load',
+      'demoId': 'data-source-auto-load',
       'name': { 'zh-CN': '自动加载数据', 'en-US': 'Automatically load data' },
       'desc': {
         'zh-CN':
@@ -30,20 +30,20 @@ export default {
         'en-US':
           '<p>Table attribute <code>auto-load</code> specifies whether to enable the automatic request service. This parameter is valid when fetch-data is configured. In the following example, if <code>auto-load</code> is set to false, data will not be automatically loaded. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/auto-load.vue']
+      'codeFiles': ['data-source/auto-load.vue']
     },
     {
-      'demoId': 'tiny-first-menu-columns',
+      'demoId': 'data-source-columns',
       'name': { 'zh-CN': '表格列的配置信息', 'en-US': 'Table column configuration information' },
       'desc': {
         'zh-CN': '<p>通过表格属性 <code>columns</code> 设置表格列的配置信息</p>\n',
         'en-US':
           '<p>Set the configuration information of table columns through the table attribute <code>columns</code></p>\n'
       },
-      'codeFiles': ['tiny-first-menu/columns.vue']
+      'codeFiles': ['data-source/columns.vue']
     },
     {
-      'demoId': 'tiny-first-menu-column-asyn-rendering',
+      'demoId': 'data-source-column-asyn-rendering',
       'name': { 'zh-CN': '开启异步渲染', 'en-US': 'Enable asynchronous rendering' },
       'desc': {
         'zh-CN':
@@ -51,17 +51,17 @@ export default {
         'en-US':
           '<p>Asynchronous rendering configuration procedure:\n1. Set the table attribute <code>is-async-column</code> to enable asynchronous rendering. \n2. Set <code>format-config</code> to enable asynchronous rendering of data in the column. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/column-asyn-rendering.vue']
+      'codeFiles': ['data-source/column-asyn-rendering.vue']
     },
     {
-      'demoId': 'tiny-first-menu-defslot-protochain-fetch',
-      'name': { 'zh-CN': '在默认插槽中使用复杂数据', 'en-US': '' },
+      'demoId': 'data-source-defslot-protochain-fetch',
+      'name': { 'zh-CN': '插槽中使用复杂数据', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>兼容低版本的复杂数据访问（例如：row.attr1.attr2.attr3），参考示例。\n在列初始化过程中，使用 `skip` 插槽参数可以跳过默认插槽内容的执行，参考示例。\n在表格渲染过程中，没有提供这个参数，始终不会跳过默认插槽内容的执行。</p>\n',
         'en-US': ''
       },
-      'codeFiles': ['tiny-first-menu/defslot-protochain-fetch.vue']
+      'codeFiles': ['data-source/defslot-protochain-fetch.vue']
     }
   ],
   apis: [{ 'name': 'grid-data-source', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]

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

@@ -3,19 +3,30 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'grid_Example-dynamicallyColumns',
+      'demoId': 'dynamically-columns-dynamicallyColumns',
       'name': {
-        'zh-CN': 'Grid-根据选择日期动态生成列',
+        'zh-CN': '根据日期动态生成列',
         'en-US': 'Grid-Dynamic column generation based on the selected date'
       },
       'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['grid_Example/dynamicallyColumns.vue']
+      'codeFiles': ['dynamically-columns/dynamically-columns.vue']
     },
     {
       'demoId': 'column-columns-dynamic',
-      'name': { 'zh-CN': 'Grid-动态列数据', 'en-US': '' },
+      'name': { 'zh-CN': '动态列数据', 'en-US': '' },
       'desc': { 'zh-CN': '兼容低版本的动态列数据', 'en-US': '' },
-      'codeFiles': ['column/columns-dynamic.vue']
+      'codeFiles': ['dynamically-columns/columns-dynamic.vue']
+    },
+    {
+      'demoId': 'dynamically-columns-reverseRow',
+      'name': { 'zh-CN': '表格行列反转', 'en-US': 'Grid-Inverting Rows and Columns in a Table' },
+      'desc': {
+        'zh-CN':
+          '<p>需要在 <code>grid</code> 标签上配 <code>:columns=&quot;tableColumn&quot;</code> <code>:show-header=&quot;false&quot;</code>。点击“反转表格”按钮可查看效果，现阶段只能执行一次，执行多次会有问题。具体参考下面示例。</p>\n',
+        'en-US':
+          "<p>You need to configure <code>:columns=&quot;tableColumn&quot;</code> <code>:show-header=&quot;false&quot;</code> on the <code>grid</code> tag. Click the 'Reverse Table' button to view the effect. Currently, the operation can only be performed once. If the operation is performed multiple times, problems may occur. For details, see the following example. </p>\n"
+      },
+      'codeFiles': ['dynamically-columns/reverse-row.vue']
     }
   ],
   apis: [{ 'name': 'grid-dynamically-columns', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]