@opentiny/vue-docs 2.1.7 → 2.1.8

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

@@ -6,10 +6,17 @@ export default {
       'demoId': 'tip-column-header-tip',
       'name': { 'zh-CN': '列头提示', 'en-US': 'Column Header Prompt' },
       'desc': {
-        'zh-CN':
-          '<p>列头提示有2种，一种是 <code>show-header-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-header-overflow</code> 内容超出当前行时隐藏并提示。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p><code>show-header-overflow</code> 可选值有：</p>\n<ul>\n<li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息，<code>show-overflow</code> 开启时的缺省提示</li>\n<li><code>title</code>：和原生标签的 <code>title</code> 属性一致</li>\n<li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示</li>\n</ul>\n</div>\n',
+        'zh-CN': `<p>列头提示有2种，一种是 <code>show-header-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-header-overflow</code> 内容超出当前行时隐藏并提示。</p>
+          <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>
+            </ul>
+          </div>`,
         'en-US':
-          '<p>There are two types of column header prompts. One is <code>show-header-tip</code> prompt (a prompt is displayed regardless of whether the content exceeds the value of <code>show-header-overflow</code>). The other is hidden and prompt 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-header-overflow</code> are as follows: </p>\n<ul>\n<li><code>tooltip</code>: displays the content that exceeds the value of <code>...</code>, displays all information at the prompt layer on the left or right, and displays the default prompt when <code>show-overflow</code> is enabled. </li>\n<li><code>title</code>: Same as the <code>title</code> attribute of the native tag. </li>\n<li><code>ellipsis</code>: <code>...</code> is displayed for the extra content, and </li>\n</ul>\n</div>\n is not displayed'
+          '<p>There are two types of column header prompts. One is <code>show-header-tip</code> prompt (a prompt is displayed regardless of whether the content exceeds the value of <code>show-header-overflow</code>). The other is hidden and prompt 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-header-overflow</code> are as follows: </p>\n<ul>\n<li><code>tooltip</code>: displays the content that exceeds the value of <code>...</code>, displays all information at the prompt layer on the left or right, and displays the default prompt when <code>show-overflow</code> is enabled. </li>\n<li><code>title</code>: Same as the <code>title</code> attribute of the native tag. </li>\n<li><code>ellipsis</code>: <code>...</code> is displayed for the extra content, and </li>\n</ul>\n</div>\n is not displayed'
       },
       'codeFiles': ['tip/column-header-tip.vue']
     },
@@ -18,9 +25,9 @@ export default {
       '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',
+          '<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',
         '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'
+          '<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'
       },
       'codeFiles': ['tip/cell-tip.vue']
     },
@@ -29,7 +36,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

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'tiny-first-menu-insert-delete-update',
+      'demoId': 'toolbar-insert-delete-update',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
@@ -11,7 +11,7 @@ export default {
         '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'
       },
-      'codeFiles': ['tiny-first-menu/insert-delete-update.vue']
+      'codeFiles': ['toolbar/insert-delete-update.vue']
     },
     {
       'demoId': 'toolbar-cancel-delete',
@@ -25,7 +25,7 @@ export default {
       'codeFiles': ['toolbar/cancel-delete.vue']
     },
     {
-      'demoId': 'tiny-first-menu-clearData',
+      'demoId': 'toolbar-clear-data',
       'name': { 'zh-CN': '清空数据', 'en-US': 'Clear Data' },
       'desc': {
         'zh-CN':
@@ -33,12 +33,12 @@ export default {
         'en-US':
           '<p>clearData method manually clears the cell content. If no parameter is transferred, the entire table content is cleared. If a line is transferred, the specified line is cleared. If a field is transferred, the field is cleared. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/clearData.vue']
+      'codeFiles': ['toolbar/clear-data.vue']
     },
     {
       'demoId': 'toolbar-insert-remove-rows',
       'name': {
-        'zh-CN': '指定行插入数据和删除指定行',
+        'zh-CN': '插入或删除指定行',
         'en-US': 'Insert data to a specified row and delete a specified row'
       },
       'desc': {
@@ -50,18 +50,18 @@ export default {
       'codeFiles': ['toolbar/insert-remove-rows.vue']
     },
     {
-      'demoId': 'tiny-first-menu-save-data',
-      'name': { 'zh-CN': '服务端数据保存和删除方法', 'en-US': 'Saving and Deleting Server Data' },
+      'demoId': 'toolbar-save-data',
+      'name': { 'zh-CN': '服务端数据保存和删除', 'en-US': 'Saving and Deleting Server Data' },
       'desc': {
         'zh-CN':
           '<p>通过表格属性 <code>save-data</code> 服务端数据保存方法。\n通过表格属性 <code>delete-data</code> 服务端数据删除方法。</p>\n',
         'en-US':
           '<p>Use the table attribute <code>save-data</code> to save server data. \n Use the table attribute <code>delete-data</code> to delete server data. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/save-data.vue']
+      'codeFiles': ['toolbar/save-data.vue']
     },
     {
-      'demoId': 'tiny-first-menu-copy-row-data',
+      'demoId': 'toolbar-copy-row-data',
       'name': { 'zh-CN': '设置工具栏尺寸大小', 'en-US': 'Set the toolbar size' },
       'desc': {
         'zh-CN':
@@ -69,21 +69,21 @@ export default {
         '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. Set the table event <code>@toolbar-button-click</code> to obtain the <code>buttons</code> event on the toolbar. You can customize the service logic for copying rows. The </p>\n<ul>\n<li><code>size</code> property specifies the size of the toolbar. The options are large, medium, small, and mini. If this parameter is not set, the default size is used. </li>\n</ul>\n'
       },
-      'codeFiles': ['tiny-first-menu/copy-row-data.vue']
+      'codeFiles': ['toolbar/copy-row-data.vue']
     },
     {
-      'demoId': 'tiny-first-menu-refresh-grid',
+      '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",
+          "<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",
         '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"
       },
-      'codeFiles': ['tiny-first-menu/refresh-grid.vue']
+      'codeFiles': ['toolbar/refresh-grid.vue']
     },
     {
-      'demoId': 'tiny-first-menu-grid-full-screen',
+      'demoId': 'toolbar-grid-full-screen',
       'name': { 'zh-CN': '开启表格全屏功能', 'en-US': 'Enable the full-screen function of the table.' },
       'desc': {
         'zh-CN':
@@ -91,16 +91,16 @@ export default {
         '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>full-screen</code> to enable the full-screen function. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/grid-full-screen.vue']
+      'codeFiles': ['toolbar/grid-full-screen.vue']
     },
     {
-      'demoId': 'tiny-first-menu-grid-full-screen-height',
+      '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.' },
-      'codeFiles': ['tiny-first-menu/grid-full-screen-height.vue']
+      'codeFiles': ['toolbar/grid-full-screen-height.vue']
     },
     {
-      'demoId': 'tiny-first-menu-custom-toolbar',
+      'demoId': 'toolbar-custom-toolbar',
       'name': { 'zh-CN': '工具栏自定义插槽', 'en-US': 'Toolbar Custom Slot' },
       'desc': {
         'zh-CN':
@@ -108,11 +108,11 @@ export default {
         'en-US':
           '<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component slot <code>#toolbar</code>. \n2. Customize content through the slot <code>#buttons</code> of the toolbar component. </p>\n'
       },
-      'codeFiles': ['tiny-first-menu/custom-toolbar.vue']
+      'codeFiles': ['toolbar/custom-toolbar.vue']
     },
     {
       'demoId': 'toolbar-toolbar-op-config',
-      'name': { 'zh-CN': '配置式', 'en-US': 'Profile' },
+      'name': { 'zh-CN': '配置式工具栏写法', 'en-US': 'Profile' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>v-bind</code> 绑定一个对象来实现配置式。在绑定的对象中 <code>toolbar</code> 字段用于工具栏配置，可配合 <code>events</code> 字段对工具栏中按钮进行 <code>toolbarButtonClick</code> 事件配置。另外，<code>pager</code> 字段用于分页配置，<code>fetchData</code> 字段用于请求服务。</p>\n',

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

@@ -0,0 +1,120 @@
+export default {
+  column: '1',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'tree-table-tree-grid-base',
+      'name': {
+        'zh-CN': '自定树节点图标',
+        'en-US': 'Data structure with children, Custom Tree Table Expand and Collapse Icon'
+      },
+      'desc': {
+        'zh-CN':
+          "<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"
+      },
+      'codeFiles': ['tree-table/tree-grid-base.vue']
+    },
+    {
+      'demoId': 'tree-table-tree-grid-data',
+      'name': { 'zh-CN': '扁平化数据结构', 'en-US': 'Flat Data Structure' },
+      'desc': {
+        'zh-CN':
+          '<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'
+      },
+      'codeFiles': ['tree-table/tree-grid-data.vue']
+    },
+    {
+      'demoId': 'tree-table-tree-grid-expand-active-method',
+      'name': { 'zh-CN': '自定义树表隐藏行', 'en-US': '' },
+      'desc': {
+        'zh-CN':
+          '<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']
+    },
+    {
+      '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',
+        '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'
+      },
+      'codeFiles': ['tree-table/tree-grid-operation-column.vue']
+    },
+    {
+      'demoId': 'tree-table-set-tree-expansion',
+      'name': { 'zh-CN': '树节点展开操作', 'en-US': 'Manually expand a specified tree node' },
+      'desc': {
+        'zh-CN': `
+        <p> <code>setTreeExpansion(rows, checked)</code> 可设置展开指定的树形节点，第二个参数设置这一行展开与否。</p>
+        <p> <code>setAllTreeExpansion(checked)</code> 可设置所有树节点的展开与否。</p>
+        <p> <code>toggleTreeExpansion(row)</code> 可设置切换展开树形节点。</p>
+        `,
+        'en-US':
+          'You can set <p> <code>setTreeExpansion(rows, checked)</code> to expand the specified tree node. The second parameter specifies whether to expand the row. </p>\n'
+      },
+      'codeFiles': ['tree-table/set-tree-expansion.vue']
+    },
+    {
+      'demoId': 'tree-table-tree-grid-fixed-column',
+      'name': { 'zh-CN': '冻结列', 'en-US': 'Frozen Column' },
+      'desc': {
+        'zh-CN':
+          '<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'
+      },
+      'codeFiles': ['tree-table/tree-grid-fixed-column.vue']
+    },
+    {
+      'demoId': 'tree-table-has-tree-expand',
+      'name': { 'zh-CN': '检查树节点是否已展开', 'en-US': 'Check whether the tree node is expanded.' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>hasTreeExpand(row)</code> 方法可以检查树节点是否已展开，参数 row 为行数据对象。</p>\n',
+        'en-US':
+          '<p>You can use the <code>hasTreeExpand(row)</code> method to check whether a tree node is expanded. The row parameter indicates the row data object. </p>\n'
+      },
+      'codeFiles': ['tree-table/has-tree-expand.vue']
+    },
+    {
+      'demoId': 'tree-table-tree-grid-index',
+      'name': { 'zh-CN': '树表展开序号列配置', 'en-US': 'Expand Row No. Column Configuration' },
+      'desc': {
+        'zh-CN':
+          '<p>在 <code>treeConfig</code> 属性里配置 <code>ordered</code> 为 <code>false</code> 展开行，序号列按父子级的结构排序。默认 <code>ordered</code> 属性为 <code>true</code> 展开行后序号列按序号排序。</p>\n',
+        'en-US':
+          '<p>In the <code>treeConfig</code> attribute, set <code>ordered</code> to <code>false</code> to expand rows. The sequence number column is sorted by parent-child structure. By default, the <code>ordered</code> attribute is <code>true</code>. After the row is expanded, the sequence number column is sorted by sequence number. </p>\n'
+      },
+      'codeFiles': ['tree-table/tree-grid-index.vue']
+    },
+    {
+      'demoId': 'tree-table-tree-grid-insert-delete-update',
+      'name': { 'zh-CN': '增删改', 'en-US': 'Add, Delete, and Modify' },
+      'desc': {
+        'zh-CN':
+          '<p>在 grid-toolbar 标签上配置 slot=&quot;toolbar&quot; 插槽，配置相关的操作按钮 ，注意：新增数据需要在 grid 标签上配置 edit-config 编辑框的配置信息，并通过 ref 获取到组件实例调用方法进行相关操作，findTree、filterTree 是工具类里的查找和过滤方法。由于tree数据节构的特殊性，grid的<code>getInsertRecords</code>与<code>getRecordset</code>方法无法获取到新增数据，此类数据需要用户自行处理。</p>\n',
+        'en-US':
+          '<p>Set slot=&quot;toolbar&quot; on the grid-toolbar tab, and configure related operation buttons. Note: To add data, you need to configure the edit-config text box on the grid tab. In addition, the component instance invokes methods through ref to perform related operations. findTree and filterTree are search and filter methods in the tool class. Due to the special structure of tree data, the <code>getInsertRecords</code> and <code>getRecordset</code> methods of the grid cannot obtain new data. Such data needs to be processed by users. </p>\n'
+      },
+      'codeFiles': ['tree-table/tree-grid-insert-delete-update.vue']
+    },
+    {
+      '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',
+        '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'
+      },
+      'codeFiles': ['tree-table/tree-grid-keyboard-operation.vue']
+    }
+  ],
+  apis: [{ 'name': 'grid-tree-table', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+}

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

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'grid_Example-gridValid-editing-validation',
+      'demoId': 'validation-editing-validation',
       'name': { 'zh-CN': '编辑时校验', 'en-US': 'Verify during editing' },
       'desc': {
         'zh-CN':
@@ -11,21 +11,21 @@ export default {
         'en-US':
           'The <p>grid tag configures the edit-config object, and configures the edit-rules object to set the validation object and validation rule. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['grid_Example/gridValid/editing-validation.vue']
+      'codeFiles': ['validation/editing-validation.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-editing-isvalidalways-validation',
-      'name': { 'zh-CN': '隐藏列编辑时校验', 'en-US': 'Verify hidden columns during editing' },
+      'demoId': 'validation-editing-isvalidalways-validation',
+      'name': { 'zh-CN': '常显编辑器校验', 'en-US': 'Verify hidden columns during editing' },
       'desc': {
         'zh-CN':
           '<p>grid 标签配置 edit-config 对象且列配置type：visible 且配置isValidAlways属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n',
         'en-US':
           '<p>When the edit-config object is configured for the grid tag, type is set to visible, and isValidAlways is configured for the column, that is, the column is always editable, verification during editing is supported. Configure the edit-rules object to set the verification object and verification rule. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['grid_Example/gridValid/editing-isvalidalways-validation.vue']
+      'codeFiles': ['validation/editing-isvalidalways-validation.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-row-data-valid',
+      'demoId': 'validation-row-data-valid',
       'name': { 'zh-CN': '数据关联校验', 'en-US': 'Data Association Verification' },
       'desc': {
         'zh-CN':
@@ -33,12 +33,12 @@ export default {
         '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'
       },
-      'codeFiles': ['grid_Example/gridValid/row-data-valid.vue']
+      'codeFiles': ['validation/row-data-valid.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-custcomp',
+      'demoId': 'validation-custcomp',
       'name': {
-        'zh-CN': '自定义组件与插槽编辑器校验',
+        'zh-CN': '自定义组件校验',
         'en-US': 'Verify the customized component with the slot editor'
       },
       'desc': {
@@ -47,10 +47,10 @@ export default {
         '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'
       },
-      'codeFiles': ['grid_Example/gridValid/custcomp.vue']
+      'codeFiles': ['validation/custcomp.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-select-validation',
+      'demoId': 'validation-select-validation',
       'name': { 'zh-CN': '选中时校验', 'en-US': 'Verify when selected' },
       'desc': {
         'zh-CN':
@@ -58,10 +58,10 @@ export default {
         'en-US':
           'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['grid_Example/gridValid/select-validation.vue']
+      'codeFiles': ['validation/select-validation.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-before-submit-validation',
+      'demoId': 'validation-before-submit-validation',
       'name': { 'zh-CN': '提交前校验', 'en-US': 'Verify Before Submission' },
       'desc': {
         'zh-CN':
@@ -69,10 +69,10 @@ export default {
         'en-US':
           'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['grid_Example/gridValid/before-submit-validation.vue']
+      'codeFiles': ['validation/before-submit-validation.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-bubbling',
+      'demoId': 'validation-bubbling',
       'name': {
         'zh-CN': '校验提示跟随单元格移动',
         'en-US': 'When the verification is triggered, the current verification cell is automatically located.'
@@ -83,10 +83,10 @@ export default {
         'en-US':
           '<p>The grid editor introduces the tiny.0 component, configures the edit-config object in the tag, and configures the edit-rules object to set the verification object and verification rule. Invoke the this.$refs.basicGrid.validate() method through the button click event to trigger table validation. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['grid_Example/gridValid/bubbling.vue']
+      'codeFiles': ['validation/bubbling.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-validation-scroll-to-col',
+      'demoId': 'validation-validation-scroll-to-col',
       'name': { 'zh-CN': '触发校验时自动定位到当前校验的单元格', 'en-US': 'Error prompt configuration item' },
       'desc': {
         'zh-CN':
@@ -94,27 +94,27 @@ export default {
         'en-US':
           '<p>The default error message is displayed on <code>body</code>. You can set <code>appendTobody</code> in <code>tooltip-config</code> to <code>false</code> to solve the problem that the tip position is incorrect during page scrolling. Set the <code>placement</code> property to adjust the default display direction. For details about the <code>tooltip-config</code> configuration, see the tooltip component</p>\n'
       },
-      'codeFiles': ['grid_Example/gridValid/validation-scroll-to-col.vue']
+      'codeFiles': ['validation/validation-scroll-to-col.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-tipconfig',
+      'demoId': 'validation-tipconfig',
       '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',
         'en-US': ''
       },
-      'codeFiles': ['grid_Example/gridValid/tipconfig.vue']
+      'codeFiles': ['validation/tipconfig.vue']
     },
     {
-      'demoId': 'grid_Example-gridValid-asterisk-method',
+      'demoId': 'validation-asterisk-method',
       'name': { 'zh-CN': '隐藏必填星号', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>通过表格属性 <code>editRules</code> 可以配置表格的编辑规则，如果指定某一字段的 <code>required</code> 为 <code>true</code>，就会在表头显示必填星号。如果想要隐藏掉必填星号，可以通过表格属性 <code>validConfig</code> 配置一个方法 <code>asteriskMethod</code> 来控制，返回 <code>false</code> 则隐藏。参考示例：</p>\n',
         'en-US': ''
       },
-      'codeFiles': ['grid_Example/gridValid/asterisk-method.vue']
+      'codeFiles': ['validation/asterisk-method.vue']
     }
   ],
   apis: [{ 'name': 'grid-validation', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]