@opentinyvue/vue-docs 3.22.0 → 3.22.2

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

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'custom-column-width',
+      demoId: 'custom-column-width',
       'name': { 'zh-CN': '本地存储列宽', 'en-US': 'Column Width' },
       'desc': {
         'zh-CN':
@@ -11,10 +11,10 @@ export default {
         '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>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']
+      codeFiles: ['custom/column-width.vue']
     },
     {
-      'demoId': 'custom-column-simple',
+      demoId: 'custom-column-simple',
       'name': { 'zh-CN': '简化版列设置', 'en-US': 'Manually Reset Columns' },
       'desc': {
         'zh-CN':
@@ -22,10 +22,10 @@ export default {
         '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']
+      codeFiles: ['custom/column-simple.vue']
     },
     {
-      'demoId': 'custom-reset-resizable',
+      demoId: 'custom-reset-resizable',
       'name': { 'zh-CN': '手动重置列操作', 'en-US': 'Sort' },
       'desc': {
         'zh-CN':
@@ -33,10 +33,10 @@ export default {
         '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>localStorage</code>. Refresh the page. The sorted data is displayed on the page.</p>\n'
       },
-      'codeFiles': ['custom/reset-resizable.vue']
+      codeFiles: ['custom/reset-resizable.vue']
     },
     {
-      'demoId': 'custom-column-sort',
+      demoId: 'custom-column-sort',
       'name': { 'zh-CN': '排序', 'en-US': 'Sort Type' },
       'desc': {
         'zh-CN':
@@ -44,10 +44,10 @@ export default {
         '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']
+      codeFiles: ['custom/column-sort.vue']
     },
     {
-      'demoId': 'custom-multiple-column-sort',
+      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> 开启多列排序，
@@ -55,10 +55,10 @@ export default {
         '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']
+      codeFiles: ['custom/multiple-column-sort.vue']
     },
     {
-      'demoId': 'custom-sort-type',
+      demoId: 'custom-sort-type',
       'name': { 'zh-CN': '排序类型', 'en-US': 'Column Freeze' },
       'desc': {
         'zh-CN':
@@ -66,10 +66,10 @@ export default {
         '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']
+      codeFiles: ['custom/sort-type.vue']
     },
     {
-      'demoId': 'custom-column-fixed',
+      demoId: 'custom-column-fixed',
       'name': { 'zh-CN': '列冻结', 'en-US': 'Local Records' },
       'desc': {
         'zh-CN':
@@ -77,20 +77,20 @@ export default {
         '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']
+      codeFiles: ['custom/column-fixed.vue']
     },
     {
-      'demoId': 'custom-ordercolumn-remote',
+      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']
+      codeFiles: ['custom/ordercolumn-remote.vue']
     },
     {
-      'demoId': 'custom-column-visible-hidden',
+      demoId: 'custom-column-visible-hidden',
       'name': { 'zh-CN': '列显示隐藏', 'en-US': 'Manually hide the displayed column' },
       'desc': {
         'zh-CN':
@@ -98,10 +98,10 @@ export default {
         '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']
+      codeFiles: ['custom/column-visible-hidden.vue']
     },
     {
-      'demoId': 'custom-hide-column',
+      demoId: 'custom-hide-column',
       'name': { 'zh-CN': '手动隐藏显示列', 'en-US': 'Event triggered before dragging the personalized panel' },
       'desc': {
         'zh-CN':
@@ -109,10 +109,10 @@ export default {
         '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']
+      codeFiles: ['custom/hide-column.vue']
     },
     {
-      'demoId': 'custom-page-size',
+      demoId: 'custom-page-size',
       'name': { 'zh-CN': '分页条数', 'en-US': 'Local Storage' },
       'desc': {
         'zh-CN':
@@ -120,10 +120,10 @@ export default {
         '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']
+      codeFiles: ['custom/page-size.vue']
     },
     {
-      'demoId': 'custom-server-storage',
+      demoId: 'custom-server-storage',
       'name': { 'zh-CN': '服务端存储', 'en-US': '' },
       'desc': {
         'zh-CN': `
@@ -131,20 +131,20 @@ export default {
          注意：如果是根据服务端数据控制显示/隐藏列，调用接口获取到个性化的数据后需手动调用 <code>reloadCustoms</code> 方法更新。</p>`,
         'en-US': ''
       },
-      'codeFiles': ['custom/server-storage.vue']
+      codeFiles: ['custom/server-storage.vue']
     },
     {
-      'demoId': 'custom-reset-method',
+      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']
+      codeFiles: ['custom/reset-method.vue']
     },
     {
-      'demoId': 'custom-ordercolumn-local',
+      demoId: 'custom-ordercolumn-local',
       'name': {
         'zh-CN': '个性化按钮点击事件',
         'en-US': 'Local Record and Personalization Panel Button Click Event Listening'
@@ -157,10 +157,10 @@ export default {
           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']
+      codeFiles: ['custom/ordercolumn-local.vue']
     },
     {
-      'demoId': 'custom-prsonalized-drag',
+      demoId: 'custom-prsonalized-drag',
       'name': { 'zh-CN': '个性化面板拖拽前事件', 'en-US': 'Number of records on each page' },
       'desc': {
         'zh-CN':
@@ -168,7 +168,7 @@ export default {
         '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']
+      codeFiles: ['custom/prsonalized-drag.vue']
     }
   ],
   apis: [{ 'name': 'grid-custom', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -3,26 +3,26 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'data-source-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': ['data-source/static-data.vue']
+      codeFiles: ['data-source/static-data.vue']
     },
     {
-      'demoId': 'data-source-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': ['data-source/request-service.vue']
+      codeFiles: ['data-source/request-service.vue']
     },
     {
-      'demoId': 'data-source-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': ['data-source/auto-load.vue']
+      codeFiles: ['data-source/auto-load.vue']
     },
     {
-      'demoId': 'data-source-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': ['data-source/columns.vue']
+      codeFiles: ['data-source/columns.vue']
     },
     {
-      'demoId': 'data-source-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': ['data-source/column-asyn-rendering.vue']
+      codeFiles: ['data-source/column-asyn-rendering.vue']
     },
     {
-      'demoId': 'data-source-defslot-protochain-fetch',
+      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': ['data-source/defslot-protochain-fetch.vue']
+      codeFiles: ['data-source/defslot-protochain-fetch.vue']
     }
   ],
   apis: [{ 'name': 'grid-data-source', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -3,17 +3,17 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'drag-row-drag',
+      demoId: 'drag-row-drag',
       'name': { 'zh-CN': '行拖拽', 'en-US': 'Drag Row' },
       'desc': {
         'zh-CN': `<p>通过设置 <code>drop-config</code> 的 <code>row</code> 属性控制行拖拽，默认为开启行拖拽，行拖拽事件有 <code>@row-drop-start</code>、<code>row-drop-move</code>、<code>row-drop-end</code>。可以通过设置 <code>dropConfig.rowHandle</code> 为 <code>'index'</code> 开启序号列作为拖拽区域，不影响行字段的复制。</p>`,
         'en-US':
           '<p>You can set the <code>row</code> attribute of <code>drop-config</code> to control row dragging. By default, row dragging is enabled. Row drag events include <code>@row-drop-start</code>, <code>row-drop-move</code>, and <code>row-drop-end</code>. </p>'
       },
-      'codeFiles': ['drag/row-drag.vue']
+      codeFiles: ['drag/row-drag.vue']
     },
     {
-      'demoId': 'drag-row-drag-ctrl',
+      demoId: 'drag-row-drag-ctrl',
       'name': { 'zh-CN': '拖拽控制', 'en-US': 'Drag Control' },
       'desc': {
         'zh-CN':
@@ -21,10 +21,10 @@ export default {
         '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'
       },
-      'codeFiles': ['drag/row-drag-ctrl.vue']
+      codeFiles: ['drag/row-drag-ctrl.vue']
     },
     {
-      'demoId': 'drag-column-drag',
+      demoId: 'drag-column-drag',
       'name': { 'zh-CN': '列拖拽', 'en-US': 'Drag Column' },
       'desc': {
         'zh-CN':
@@ -32,17 +32,17 @@ export default {
         'en-US':
           '<p>You can set the <code>column</code> attribute of <code>drop-config</code> to control column dragging. Column dragging is enabled by default. Column drag events include <code>@column-drop-start</code>, <code>column-drop-move</code>, and <code>column-drop-end</code>. </p>\n'
       },
-      'codeFiles': ['drag/column-drag.vue']
+      codeFiles: ['drag/column-drag.vue']
     },
     {
-      'demoId': 'multi-header-drag',
+      demoId: 'multi-header-drag',
       'name': { 'zh-CN': '多级表头拖拽', 'en-US': 'Multiple header drag' },
       'desc': {
         'zh-CN': `<p>设置表格属性 <code>columnKey</code> 和 <code>dropConfig</code>。在设置 <code>dropConfig.scheme</code> 为 v2 且设置 <code>dropConfig.column</code> 为 <code>true</code> 时，开启多表头列拖拽。
           其它属性 <code>dropConfig.columnGroup</code>，<code>dropConfig.columnBeforeDrop</code> 和 <code>dropConfig.columnDropClass</code>，参考示例配置：</p>\n`,
         'en-US': ''
       },
-      'codeFiles': ['drag/multi-header-drag.vue']
+      codeFiles: ['drag/multi-header-drag.vue']
     }
   ],
   apis: [{ 'name': 'grid-drag', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'dynamically-columns-dynamically-columns',
+      demoId: 'dynamically-columns-dynamically-columns',
       'name': {
         'zh-CN': '根据日期动态生成列',
         'en-US': 'Grid-Dynamic column generation based on the selected date'
@@ -12,10 +12,10 @@ export default {
         'zh-CN': '根据日期范围选择框的日期范围动态的生成表格列。',
         'en-US': 'For details, see the following example.'
       },
-      'codeFiles': ['dynamically-columns/dynamically-columns.vue']
+      codeFiles: ['dynamically-columns/dynamically-columns.vue']
     },
     {
-      'demoId': 'column-switching-scroll',
+      demoId: 'column-switching-scroll',
       'name': {
         'zh-CN': '新增列滚动位置',
         'en-US': 'New columns scroll positon'
@@ -24,16 +24,16 @@ export default {
         'zh-CN': '根据日期范围选择框的日期范围动态的生成表格列。',
         'en-US': 'For details, see the following example.'
       },
-      'codeFiles': ['dynamically-columns/column-switching-scroll.vue']
+      codeFiles: ['dynamically-columns/column-switching-scroll.vue']
     },
     {
-      'demoId': 'column-columns-dynamic',
+      demoId: 'column-columns-dynamic',
       'name': { 'zh-CN': '动态列数据', 'en-US': '' },
       'desc': { 'zh-CN': '兼容低版本的动态列数据。', 'en-US': '' },
-      'codeFiles': ['dynamically-columns/columns-dynamic.vue']
+      codeFiles: ['dynamically-columns/columns-dynamic.vue']
     },
     {
-      'demoId': 'dynamically-columns-reverse-row',
+      demoId: 'dynamically-columns-reverse-row',
       'name': { 'zh-CN': '表格行列反转', 'en-US': 'Grid-Inverting Rows and Columns in a Table' },
       'desc': {
         'zh-CN':
@@ -41,25 +41,25 @@ export default {
         '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']
+      codeFiles: ['dynamically-columns/reverse-row.vue']
     },
     {
-      'demoId': 'dynamically-columns-reverse-columns',
+      demoId: 'dynamically-columns-reverse-columns',
       'name': { 'zh-CN': '表格列顺序转换', 'en-US': '' },
       'desc': {
         'zh-CN': '<p></p>\n',
         'en-US': '<p></p>\n'
       },
-      'codeFiles': ['dynamically-columns/reverse-columns.vue']
+      codeFiles: ['dynamically-columns/reverse-columns.vue']
     },
     {
-      'demoId': 'dynamic-slot',
+      demoId: 'dynamic-slot',
       'name': { 'zh-CN': '动态修改列插槽', 'en-US': '' },
       'desc': {
         'zh-CN': '<p></p>\n',
         'en-US': '<p></p>\n'
       },
-      'codeFiles': ['dynamically-columns/dynamic-slot.vue']
+      codeFiles: ['dynamically-columns/dynamic-slot.vue']
     }
   ],
   apis: [{ 'name': 'grid-dynamically-columns', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'edit-editing',
+      demoId: 'edit-editing',
       'name': { 'zh-CN': '编辑方式', 'en-US': 'Cell Edit' },
       'desc': {
         'zh-CN': `
@@ -12,10 +12,10 @@ export default {
         'en-US':
           "<p>Table attribute setting <code>edit-config</code>Enable the editing mode, and then set <code>mode:'cell'</code> in the attribute object to enable line editing, that is, <code>:edit-config=&quot;{mode: 'cell'}&; </code>. \nTable Column Attribute Settings<code>show-icon</code> Sets whether to display the editing icon in the column header. This parameter is valid during editing. </p>\n"
       },
-      'codeFiles': ['edit/editing.vue']
+      codeFiles: ['edit/editing.vue']
     },
     {
-      'demoId': 'edit-revert-data',
+      demoId: 'edit-revert-data',
       'name': { 'zh-CN': '还原更改', 'en-US': 'Restore Changes' },
       'desc': {
         'zh-CN':
@@ -23,20 +23,20 @@ export default {
         'en-US':
           '<p>Invoke the <code>revertData(rows, field)</code> method to restore the data of a specified row or the entire table. If rows is an object, one row of data is restored. If rows is an array, multiple rows of data are restored. The field is optional. If no parameter is specified, the entire table data is restored. </p>\n'
       },
-      'codeFiles': ['edit/revert-data.vue']
+      codeFiles: ['edit/revert-data.vue']
     },
     {
-      'demoId': 'edit-has-row-change',
+      demoId: 'edit-has-row-change',
       'name': { 'zh-CN': '检查数据是否改变', 'en-US': 'Check whether data is changed.' },
       'desc': {
         'zh-CN': '<p> <code>hasRowChange(row, field)</code> 检查行或列数据是否发生改变，field 可不指定。</p>\n',
         'en-US':
           '<p> <code>hasRowChange(row, field)</code> Checks whether the row or column data is changed. The field is optional. </p>\n'
       },
-      'codeFiles': ['edit/has-row-change.vue']
+      codeFiles: ['edit/has-row-change.vue']
     },
     {
-      'demoId': 'edit-trigger-mode-hm-editing',
+      demoId: 'edit-trigger-mode-hm-editing',
       'name': { 'zh-CN': '手动触发编辑', 'en-US': 'Manually triggered editing' },
       'desc': {
         'zh-CN': `<p> <code>setActiveCell(row, field)</code> 方法可激活指定单元格编辑。<code>setActiveRow(row)</code> 方法激活行编辑，如果是 mode=cell 则默认激活第一个单元格。</p>
@@ -44,10 +44,10 @@ export default {
           `,
         'en-US': 'For details, see the following example.'
       },
-      'codeFiles': ['edit/trigger-mode-hm-editing.vue']
+      codeFiles: ['edit/trigger-mode-hm-editing.vue']
     },
     {
-      'demoId': 'edit-custom-editing',
+      demoId: 'edit-custom-editing',
       'name': { 'zh-CN': '自定义编辑规则', 'en-US': 'Custom Editing Rule' },
       'desc': {
         'zh-CN':
@@ -55,10 +55,10 @@ export default {
         'en-US':
           '<p>Table attribute setting<code>edit-config</code>Enable the editing mode, and then set <code>activeMethod</code> custom editing rules in the attribute object. </p>\n'
       },
-      'codeFiles': ['edit/custom-editing.vue']
+      codeFiles: ['edit/custom-editing.vue']
     },
     {
-      'demoId': 'edit-editor-is-valid-always',
+      demoId: 'edit-editor-is-valid-always',
       'name': { 'zh-CN': '自定义编辑校验规则', 'en-US': 'Customized Editing Verification Rule' },
       'desc': {
         'zh-CN':
@@ -66,10 +66,10 @@ export default {
         'en-US':
           '<p>Table attribute setting<code>edit-config</code>Enable the editing mode and configure the <code>edit-rules</code> object to set the validation object and validation rule. Set <code>isValidAlways</code> in the <code>editor</code> object to enable real-time editing verification. </p>\n'
       },
-      'codeFiles': ['edit/editor-is-valid-always.vue']
+      codeFiles: ['edit/editor-is-valid-always.vue']
     },
     {
-      'demoId': 'edit-status-of-editing',
+      demoId: 'edit-status-of-editing',
       'name': { 'zh-CN': '开启和关闭编辑状态', 'en-US': 'Enable editing' },
       'desc': {
         'zh-CN':
@@ -77,10 +77,10 @@ export default {
         'en-US':
           '<p>Table attribute settings<code>edit-config</code>Enable the editing mode, Set <code>showStatus</code> in the attribute object to enable or disable the cell update status (inverted triangle update flag in the upper left corner of the cell). The default value is <code>true</code>. </p>\n'
       },
-      'codeFiles': ['edit/status-of-editing.vue']
+      codeFiles: ['edit/status-of-editing.vue']
     },
     {
-      'demoId': 'edit-grid-equals',
+      demoId: 'edit-grid-equals',
       'name': { 'zh-CN': '自定义比较方法', 'en-US': 'Enable editing' },
       'desc': {
         'zh-CN':
@@ -88,10 +88,10 @@ export default {
         'en-US':
           '<p>Table attribute settings<code>edit-config</code>Enable the editing mode, Set <code>showStatus</code> in the attribute object to enable or disable the cell update status (inverted triangle update flag in the upper left corner of the cell). The default value is <code>true</code>. </p>\n'
       },
-      'codeFiles': ['edit/grid-equals.vue']
+      codeFiles: ['edit/grid-equals.vue']
     },
     {
-      'demoId': 'edit-trigger-mode-for-editing',
+      demoId: 'edit-trigger-mode-for-editing',
       'name': { 'zh-CN': '触发编辑方式', 'en-US': 'Click to trigger editing' },
       'desc': {
         'zh-CN':
@@ -99,7 +99,7 @@ export default {
         'en-US':
           '<p>Table attribute setting<code>edit-config</code>Enable the editing mode, and then set <code>trigger</code> in the attribute object to modify the triggering mode. The options are as follows: <code>click trigger (click), double-click trigger (dblclick), and manual trigger (manual)</code>. The default value is <code>click trigger</code>. </p>\n'
       },
-      'codeFiles': ['edit/trigger-mode-for-editing.vue']
+      codeFiles: ['edit/trigger-mode-for-editing.vue']
     }
   ],
   apis: [{ 'name': 'grid-edit', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'editor-inner-editor',
+      demoId: 'editor-inner-editor',
       'name': { 'zh-CN': '内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
       'desc': {
         'zh-CN': `
@@ -16,10 +16,10 @@ export default {
         'en-US':
           'Configure <code>edit-config</code> on the <p> <code>grid</code> label. In the <code>grid-column</code> column, configure the <code>editor</code> object, <code>component</code> render the built-in editing component, and <code>events</code> configure component events. For details, see the following example. </p>\n<div class="tip custom-block"><p class="custom-block-title"> Description</p>\n<p>The built-in editor supports only the <code>Input</code> and <code>Select</code> components. For details about how to use other components, see the custom editor </p>\n</div>\n'
       },
-      'codeFiles': ['editor/inner-editor.vue']
+      codeFiles: ['editor/inner-editor.vue']
     },
     {
-      'demoId': 'editor-custom-editor-select',
+      demoId: 'editor-custom-editor-select',
       'name': { 'zh-CN': '自定义编辑器', 'en-US': 'Introducing the TINY component as the editor' },
       'desc': {
         'zh-CN': `
@@ -28,10 +28,10 @@ export default {
         'en-US':
           '<p>Introduces the TinyVue <code>Select</code> component through <code>attribute configuration</code>. </p>\n'
       },
-      'codeFiles': ['editor/custom-editor-select.vue']
+      codeFiles: ['editor/custom-editor-select.vue']
     },
     {
-      'demoId': 'editor-mutil-render',
+      demoId: 'editor-mutil-render',
       'name': { 'zh-CN': '下拉多选', 'en-US': 'Grid-editor-drop-down list' },
       'desc': {
         'zh-CN':
@@ -39,10 +39,10 @@ export default {
         'en-US':
           '<p> When multiple options are selected from the drop-down list box, cell rendering needs to be implemented. In the following example, <code>format-text</code> is used to render multiple enumerated values. You can also use <code>renderer</code> to implement customized components for rendering. </p>\n'
       },
-      'codeFiles': ['editor/mutil-render.vue']
+      codeFiles: ['editor/mutil-render.vue']
     },
     {
-      'demoId': 'editor-popeditor-in-grid-remote-search',
+      demoId: 'editor-popeditor-in-grid-remote-search',
       'name': {
         'zh-CN': '弹窗编辑',
         'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
@@ -52,37 +52,37 @@ export default {
           '<p>在 <code>grid-column</code> 列元素上配置 <code>editor</code> 属性，该对象中可以指定 <code>component</code> 为 <code>Popeditor</code>、<code>attrs</code> 为 Popeditor 组件的属性。需要注意的是，引入 Popeditor 组件后，需要在 <code>data()</code> 中进行实例化。</p>\n',
         'en-US': 'For details, see the following example.'
       },
-      'codeFiles': ['editor/popeditor-in-grid-remote-search.vue']
+      codeFiles: ['editor/popeditor-in-grid-remote-search.vue']
     },
     {
-      'demoId': 'editor-editor-bg',
+      demoId: 'editor-editor-bg',
       'name': { 'zh-CN': '维护编辑状态', 'en-US': '' },
       'desc': {
         'zh-CN':
           "<p>假设 <code>名称字段</code> 和 <code>id 为 '3' 的行</code> 不可编辑，可以通过 <code>editConfig.activeMethod</code> 设置其单元格不可进入编辑，通过 <code>cellClassName</code> 设置其单元格的背景底色。</p>",
         'en-US': ''
       },
-      'codeFiles': ['editor/editor-bg.vue']
+      codeFiles: ['editor/editor-bg.vue']
     },
     {
-      'demoId': 'active-strictly',
+      demoId: 'active-strictly',
       'name': { 'zh-CN': '行编辑禁用特定列', 'en-US': '' },
       'desc': {
         'zh-CN':
           "<p>当 <code>editConfig.mode</code> 为'row'时，行编辑激活状态下默认会忽略 <code>editConfig.activeMethod</code> ，配置 <code>editConfig.activeStrictly</code> 为 true 使其生效",
         'en-US': ''
       },
-      'codeFiles': ['editor/active-strictly.vue']
+      codeFiles: ['editor/active-strictly.vue']
     },
     {
-      'demoId': 'editor-custom-edit',
+      demoId: 'editor-custom-edit',
       'name': { 'zh-CN': '多行编辑', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>表格编辑器场景，在表格内部维护编辑状态，只能使整行或单个单元格处于编辑状态。如果需要使多行处于编辑状态，需要使用渲染器自行实现，在自定义编辑状态时，表格内置的一些编辑行为，例如表头是否显示必填星号、编辑规则等将不可用，需要自行实现，参考示例：</p>',
         'en-US': ''
       },
-      'codeFiles': ['editor/custom-edit.vue']
+      codeFiles: ['editor/custom-edit.vue']
     }
   ],
   apis: [{ 'name': 'grid-editor', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]