@opentiny/vue-docs 2.2.7 → 2.2.9

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

@@ -14,17 +14,17 @@ export default {
             <li><code>integer</code>：显示成整数。</li>
             <li><code>number</code>：显示成小数。</li>
             <li><code>money</code>：显示成钱数。</li>
-            <li>rate：显示成百分比的数据。</li>
-            <li>filesize：显示成文件大小的数据。</li>
-            <li>boole：显示成对号或者叉号的图标。</li>
-            <li>date：显示成年月日。</li>
-            <li>dateTime：显示成年月日时分。</li>
-            <li>longDateTime：显示成年月日时分秒。</li>
-            <li>time：显示成时分。</li>
-            <li>longTime：显示成时分秒。</li>
-            <li>yearMonth：显示成年月。</li>
-            <li>enum：通过数据的值，查询出要显示的文本。</li>
-            <li>ellipsis：显示成省略的内容，鼠标移到该单元格上，显示完整内容的提示信息。需要同时配置 format 的 len 属性。</li>
+            <li><code>rate</code>：显示成百分比的数据。</li>
+            <li><code>filesize</code>：显示成文件大小的数据。</li>
+            <li><code>boole</code>：显示成对号或者叉号的图标。</li>
+            <li><code>date</code>：显示成年月日。</li>
+            <li><code>dateTime</code>：显示成年月日时分。</li>
+            <li><code>longDateTime</code>：显示成年月日时分秒。</li>
+            <li><code>time</code>：显示成时分。</li>
+            <li><code>longTime</code>：显示成时分秒。</li>
+            <li><code>yearMonth</code>：显示成年月。</li>
+            <li><code>enum</code>：通过数据的值，查询出要显示的文本。</li>
+            <li><code>ellipsis</code>：显示成省略的内容，鼠标移到该单元格上，显示完整内容的提示信息。需要同时配置 format 的 len 属性。</li>
           </ul>
         </div>
         `,

package/demos/pc/app/grid/webdoc/grid-row-grouping.js

@@ -6,7 +6,7 @@ export default {
       'demoId': 'row-grouping-row-grouping',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p> <code>row-group</code> 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。</p>\n',
+        'zh-CN': '<p>通过 <code>row-group</code> 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。</p>\n',
         'en-US':
           'Row groups can be configured for the <p> <code>row-group</code> attribute. Columns with the same value are displayed in groups. </p>\n'
       },
@@ -17,7 +17,7 @@ export default {
       'name': { 'zh-CN': '自定义分组', 'en-US': 'Customized Group' },
       'desc': {
         'zh-CN':
-          '<p> <code>row-group</code> 配置项 <code>render</code> 可以自定义渲染分组内容， <code>closeable</code> 可以控制分组行是否可以折叠。</p>\n',
+          '<p>通过 <code>row-group</code> 配置项 <code>render</code> 可以自定义渲染分组内容， <code>closeable</code> 可以控制分组行是否可以折叠。</p>\n',
         'en-US':
           'The <p> <code>row-group</code> configuration item <code>render</code> can be used to customize group content rendering, and <code>closeable</code> can be used to control whether group lines can be collapsed. </p>\n'
       },

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

@@ -4,7 +4,7 @@ export default {
   demos: [
     {
       'demoId': 'size-fixed-column-width',
-      'name': { 'zh-CN': '列属性设置宽度', 'en-US': 'Table column attribute width' },
+      'name': { 'zh-CN': '列属性宽度', 'en-US': 'Table column attribute width' },
       'desc': {
         'zh-CN': '<p>表格列属性设置 width 固定宽度，支持数值和百分比。</p>\n',
         'en-US': '<p>The fixed width of the table column attribute is set. Values and percentages are supported. </p>\n'
@@ -13,7 +13,7 @@ export default {
     },
     {
       'demoId': 'size-column-min-width',
-      'name': { 'zh-CN': '设置总体列宽', 'en-US': 'Minimum width of this column' },
+      'name': { 'zh-CN': '总体列宽', 'en-US': 'Minimum width of this column' },
       'desc': {
         'zh-CN':
           '<p>通过属性 <code>column-min-width</code> 设置总体列可以调整到的最小宽度，不设置时默认为列头 span 的宽度 + 36（头部固定宽度）。\n</p>\n',
@@ -34,7 +34,7 @@ export default {
     },
     {
       'demoId': 'size-column-width',
-      'name': { 'zh-CN': '设置所有列宽度', 'en-US': 'Recalculate Table' },
+      'name': { 'zh-CN': '所有列宽度', 'en-US': 'Recalculate Table' },
       'desc': {
         'zh-CN': '<p>通过属性 <code>column-width</code> 设置所有列宽度，默认值为均匀分配。\n</p>\n',
         'en-US':
@@ -44,7 +44,7 @@ export default {
     },
     {
       'demoId': 'size-fixed-grid-height',
-      'name': { 'zh-CN': '表格属性设置高度', 'en-US': 'Table Attribute Setting Height' },
+      'name': { 'zh-CN': '表格属性高度', 'en-US': 'Table Attribute Setting Height' },
       'desc': {
         'zh-CN': '<p>表格属性设置 height 固定表格高度。</p>\n',
         'en-US': '<p>Table attribute setting height Fixed table height. </p>\n'
@@ -53,7 +53,7 @@ export default {
     },
     {
       'demoId': 'size-max-min-grid-height',
-      'name': { 'zh-CN': '设置最大、最小高度', 'en-US': 'Set the maximum height of maxHeight' },
+      'name': { 'zh-CN': '最大、最小高度', 'en-US': 'Set the maximum height of maxHeight' },
       'desc': {
         'zh-CN': '<p>表格属性设置 minHeight 限制最小高度，maxHeight 限制最大高度。</p>\n',
         'en-US': 'For details, see the following example.'
@@ -75,7 +75,7 @@ export default {
       'demoId': 'size-resize-column-width',
       'name': { 'zh-CN': '开启列宽拖拽', 'en-US': 'Enable column width dragging' },
       'desc': {
-        'zh-CN': '<p>列宽默认开启，如需禁用需要设置<code>resizable</code>为<code>false</code>。</p>\n',
+        'zh-CN': '<p>列宽拖拽默认开启，如需禁用需要设置 <code>resizable</code> 为 <code>false</code>。</p>\n',
         'en-US':
           '<p>Column width is enabled by default. To disable this function, set <code>resizable</code> to <code>false</code></p>\n'
       },

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

@@ -5,19 +5,28 @@ export default {
     {
       'demoId': 'slot-default-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#default</code> 添加表格列的默认插槽。</p>`,
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['slot/default-slot.vue']
     },
     {
       'demoId': 'slot-buttons-slot',
       'name': { 'zh-CN': '工具栏插槽', 'en-US': 'Toolbar slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#toolbar</code> 添加表格的工具栏插槽。</p>`,
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['slot/buttons-slot.vue']
     },
     {
       'demoId': 'slot-empty-slot',
       'name': { 'zh-CN': '空数据显示插槽', 'en-US': 'Empty data display slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#empty</code> 添加表格的空数据插槽。</p>`,
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['slot/empty-slot.vue']
     },
     {
@@ -32,7 +41,10 @@ export default {
     {
       'demoId': 'slot-header-slot',
       'name': { 'zh-CN': '表头插槽', 'en-US': 'Table header slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': `<p>通过 <code>template</code> 标签并配置 <code>#header</code> 添加表格列的表头插槽。</p>`,
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['slot/header-slot.vue']
     }
   ],

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

@@ -6,7 +6,7 @@ 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>
+        'zh-CN': `<p>列头提示有两种，一种是 <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>
@@ -25,14 +25,14 @@ export default {
       'name': { 'zh-CN': '单元格提示', 'en-US': 'Cell Prompt' },
       'desc': {
         'zh-CN': `
-        <p>单元格提示有2种，一种是 <code>show-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-overflow</code> 内容超出当前行时隐藏并提示。</p>
+        <p>单元格提示有两种，一种是 <code>show-tip</code> 提示（内容是否超出都会提示），另一种是 <code>show-overflow</code> 内容超出当前行时隐藏并提示。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">TIP</p>
           <p> <code>show-overflow</code> 可选值有：</p>
           <ul>
+            <li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息</li>
             <li><code>title</code>：和原生标签的 <code>title</code> 属性一致</li>
             <li><code>ellipsis</code>：内容超出部分显示 <code>...</code>，没有提示</li>
-            <li><code>tooltip</code>：内容超出部分显示 <code>...</code>，左侧/右侧弹出提示层显示全部信息</li>
           </ul>
         </div>\n`,
         'en-US':

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

@@ -7,7 +7,14 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN': `
-        <p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。\n3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现增删改操作的业务逻辑。</p>
+        <div class="tip custom-block">
+          <p class="custom-block-title">工具栏配置步骤：</p>
+          <ul>
+            <li>1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。</li>
+            <li>2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。</li>
+            <li>3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现增删改操作的业务逻辑。</li>
+          </ul>
+        </div>
         <div class="tip custom-block">
           <p class="custom-block-title">新增的行需要标记新增状态的样式时需要配置 edit-config 的 markInsert 项为 true。</p>
         </div>`,
@@ -65,10 +72,10 @@ export default {
     },
     {
       'demoId': 'toolbar-copy-row-data',
-      'name': { 'zh-CN': '设置工具栏尺寸大小', 'en-US': 'Set the toolbar size' },
+      'name': { 'zh-CN': '工具栏尺寸大小', 'en-US': 'Set the toolbar size' },
       'desc': {
         'zh-CN':
-          '<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>buttons</code> 进行按钮组相关配置。\n3、表格事件设置 <code>@toolbar-button-click</code> 获取工具栏 <code>buttons</code> 的事件，用户可自定义实现复制行操作的业务逻辑。</p>\n<ul>\n<li><code>size</code> 属性设置工具栏尺寸大小,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。</li>\n</ul>\n',
+          '<p>通过 <code>size</code> 属性设置工具栏尺寸大小,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。</p>',
         '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'
       },
@@ -79,7 +86,7 @@ export default {
       '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>
+        <p>设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
         <ul>
           <li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>
         </ul>`,
@@ -92,8 +99,7 @@ export default {
       'demoId': 'toolbar-grid-full-screen',
       'name': { 'zh-CN': '开启表格全屏功能', 'en-US': 'Enable the full-screen function of the table.' },
       'desc': {
-        'zh-CN':
-          '<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件属性 <code>slot=&quot;toolbar&quot;</code> 。\n2、设置工具栏组件属性 <code>full-screen</code> 开启表格全屏功能。</p>\n',
+        'zh-CN': '<p>设置工具栏组件属性 <code>full-screen</code> 开启表格全屏功能。</p>\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>full-screen</code> to enable the full-screen function. </p>\n'
       },
@@ -102,15 +108,17 @@ export default {
     {
       'demoId': 'toolbar-grid-full-screen-height',
       'name': { 'zh-CN': '全屏时改变表格高度', 'en-US': 'Change the table height in full screen mode' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '<p>通过表格属性<code>height</code> 在全屏是动态改变表格高度。</p>',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['toolbar/grid-full-screen-height.vue']
     },
     {
       'demoId': 'toolbar-custom-toolbar',
       'name': { 'zh-CN': '工具栏自定义插槽', 'en-US': 'Toolbar Custom Slot' },
       'desc': {
-        'zh-CN':
-          '<p>工具栏配置步骤：\n1、表格以插槽方式引入表格工具栏组件 <code>GridToolbar</code>，并设置工具栏组件插槽 <code>#toolbar</code> 。\n2、通过工具栏组件的插槽 <code>#buttons</code> 自定义内容。</p>\n',
+        'zh-CN': '<p>通过工具栏组件的插槽 <code>#buttons</code> 自定义内容。</p>',
         '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'
       },

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

@@ -10,7 +10,7 @@ export default {
       },
       'desc': {
         'zh-CN':
-          "<p>在 grid 标签上配置 tree-config={children: 'children',renderIcon},其中renderIcon可以自定义树表的展开收缩图标。以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性。</p>\n",
+          "<p>在 <code>grid</code> 标签上配置 <code>tree-config={children: 'children',renderIcon}</code>，其中 <code>renderIcon</code> 可以自定义树表的展开收缩图标。以树的形式来展示数据,还需要在展示树节点的字段上配置 <code>tree-node</code> 属性。</p>\n",
         'en-US':
           "<p>Configure tree-config=&quot;{children:'children'}&quot; on the grid tab to display data in a tree. In addition, you need to configure the tree-node attribute</p>\n on the field that displays the tree node"
       },
@@ -21,7 +21,7 @@ export default {
       'name': { 'zh-CN': '扁平化数据结构', 'en-US': 'Flat Data Structure' },
       'desc': {
         'zh-CN':
-          '<p>注意：扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构。</p>\n',
+          '<p>注意：扁平化的数据结构需要调用 <code>aggregateTableData</code> 方法把数据转换成带有子级的数据才能正常的显示出树表的结构。</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'
       },
@@ -41,7 +41,8 @@ export default {
       'demoId': 'tree-table-tree-grid-operation-column',
       'name': { 'zh-CN': '操作列', 'en-US': 'Operation Column' },
       'desc': {
-        'zh-CN': '<p>列通过配置 type=&quot;radio&quot; 实现单选，配置 type=&quot;selection&quot; 实现多选。</p>\n',
+        'zh-CN':
+          '<p>列通过配置 <code>type=&quot;radio&quot</code>; 实现单选，配置 <code>type=&quot;selection&quot</code>; 实现多选。</p>\n',
         'en-US':
           'In the <p> column, you can set type=&quot;radio&quot; to enable single selection and type=&quot;selection&quot; to enable multiple selection</p>\n'
       },
@@ -66,7 +67,7 @@ export default {
       'name': { 'zh-CN': '冻结列', 'en-US': 'Frozen Column' },
       'desc': {
         'zh-CN':
-          '<p>在列的标签上可以通过配置 fixed=&quot;left&quot; 属性把该列固定在左侧，配置 fixed=&quot;right&quot; 属性把该列固定在右侧。</p>\n',
+          '<p>在列的标签上可以通过配置 <code>fixed=&quot;left&quot</code>; 属性把该列固定在左侧，配置 <code>fixed=&quot;right&quot</code>; 属性把该列固定在右侧。</p>',
         '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'
       },
@@ -76,7 +77,8 @@ export default {
       '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',
+        'zh-CN':
+          '<p>通过 <code>hasTreeExpand(row)</code> 方法可以检查树节点是否已展开，参数 <code>row</code> 为行数据对象。</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'
       },
@@ -98,7 +100,7 @@ export default {
       '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',
+          '<p>在 <code>grid-toolbar</code> 标签上配置 <code>slot=&quot;toolbar&quot</code>; 插槽，配置相关的操作按钮 ，注意：新增数据需要在 <code>grid</code> 标签上配置 <code>edit-config</code> 编辑框的配置信息，并通过 <code>ref</code> 获取到组件实例调用方法进行相关操作，<code>findTree、filterTree</code> 是工具类里的查找和过滤方法。由于tree</code> 数据节构的特殊性，<code>grid</code> 的 <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'
       },
@@ -109,7 +111,7 @@ export default {
       'name': { 'zh-CN': '键盘操作', 'en-US': 'Keyboard operation' },
       'desc': {
         'zh-CN': `
-        <p>键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能。</p>
+        <p>键盘移动高亮行,设置斑马线属性 <code>stripe</code> 为 <code>false</code>,鼠标悬停高亮行 <code>highlight-hover-row</code> 为 <code>false</code>,高亮当前行 <code>highlight-current-row</code> ,并配置 <code>keyboard-config={isArrow: true}</code> 属性启用方向键功能。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">按键说明：</p>
           <ul>

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

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '编辑时校验', 'en-US': 'Verify during editing' },
       'desc': {
         'zh-CN':
-          '<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n',
+          '<p><code>grid</code> 标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则。</p>\n',
         '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'
       },
@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '常显编辑器校验', 'en-US': 'Verify hidden columns during editing' },
       'desc': {
         'zh-CN':
-          '<p>grid 标签配置 edit-config 对象且列配置type：visible 且配置isValidAlways属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n',
+          '<p><code>grid</code> 标签配置 <code>edit-config</code> 对象且列配置 <code>type：visible</code> 且配置 <code>isValidAlways</code> 属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则。</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'
       },
@@ -54,7 +54,7 @@ export default {
       'name': { 'zh-CN': '选中时校验', 'en-US': 'Verify when selected' },
       'desc': {
         'zh-CN':
-          '<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n',
+          '<p><code>grid</code> 标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，通过按钮点击事件调用 <code>this.$refs.basicGrid.validate()</code> 方法来触发表格校验，具体参考下面示例。</p>\n',
         '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'
       },
@@ -65,7 +65,7 @@ export default {
       'name': { 'zh-CN': '提交前校验', 'en-US': 'Verify Before Submission' },
       'desc': {
         'zh-CN':
-          '<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。注意：如果传递了 callback 回调就不能正常 catch 到 validate 捕获到的错误。</p>\n',
+          '<p><code>grid</code> 标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，通过按钮点击事件调用 <code>this.$refs.basicGrid.validate()</code> 方法来触发表格校验，具体参考下面示例。注意：如果传递了 callback 回调就不能正常 catch 到 validate 捕获到的错误。</p>\n',
         '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'
       },
@@ -79,7 +79,7 @@ export default {
       },
       'desc': {
         'zh-CN':
-          '<p>通过配置 tooltipConfig.popperOptions.bubbling 为 true ，可实现表格的校验提示跟随其外部的滚动条滚动。</p>\n',
+          '<p>通过配置 <code>tooltipConfig.popperOptions.bubbling</code> 为 <code>true</code> ，可实现表格的校验提示跟随其外部的滚动条滚动。</p>\n',
         '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'
       },
@@ -90,7 +90,7 @@ export default {
       'name': { 'zh-CN': '触发校验时自动定位到当前校验的单元格', 'en-US': 'Error prompt configuration item' },
       'desc': {
         'zh-CN':
-          '<p>grid 编辑器引入 tiny 组件，标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n',
+          '<p><code>grid</code> 编辑器引入 <code>TinyVue</code> 组件，标签配置 <code>edit-config</code> 对象，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，通过按钮点击事件调用 <code>this.$refs.basicGrid.validate()</code> 方法来触发表格校验，具体参考下面示例。</p>\n',
         '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'
       },