TIP
\n
table has the lowest priority. The alignment mode configured in the
\n
TIP
\n
table will overwrite the
\n
\n'
},
- 'codeFiles': ['align/grid-align/grid-align.vue']
+ 'codeFiles': ['align/grid-align.vue']
}
],
apis: [{ 'name': 'grid-align', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-customized.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-customized.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-customized.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-customized.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.js b/examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.js
new file mode 100644
index 000000000..0dd0ebf2a
--- /dev/null
+++ b/examples/sites/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': '
表格属性设置 border 给表格加上边框。
\n',
+ 'en-US': '
Table property setting borderAdds a border to the table.
\n'
+ },
+ 'codeFiles': ['appearance-settings/grid-border.vue']
+ },
+ {
+ 'demoId': 'appearance-settings-stripe',
+ 'name': { 'zh-CN': '斑马条纹', 'en-US': 'Basic Usage' },
+ 'desc': {
+ 'zh-CN':
+ '
stripe 是否带有斑马纹 默认不开启。设置 :stripe="true" 时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)
\n',
+ 'en-US':
+ 'Whether the
stripe has zebra prints is disabled by default. Enabled when :stripe="true" is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.)
\n'
+ },
+ 'codeFiles': ['appearance-settings/stripe.vue']
+ }
+ ],
+ apis: [{ 'name': 'grid-appearance-settings', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-customized.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.json.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-customized.json.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.json.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-customized.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.json.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-customized.json.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-appearance-settings.json.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-cascade.js b/examples/sites/demos/pc/app/grid/webdoc/grid-cascade.js
index 7297e1995..eb393b329 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-cascade.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-cascade.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'grid_Example-dataCascading-cascade',
+ 'demoId': 'cascade-cascade',
'name': { 'zh-CN': 'Grid-数据级联-正常列级联', 'en-US': 'Grid-data concatenation-normal column concatenation' },
'desc': {
'zh-CN':
@@ -11,10 +11,10 @@ export default {
'en-US':
'
You need to configure the edit-config object on the grid tag, and activeMethod before editing the event processing edit item data set. \nThe editor object is configured in the grid-column column. component is used to render the editing component. \nattrsConfigure cascading data. \nevents to set events. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/dataCascading/cascade.vue']
+ 'codeFiles': ['cascade/cascade.vue']
},
{
- 'demoId': 'grid_Example-dataCascading-arbitraryCascade',
+ 'demoId': 'cascade-arbitrary-cascade',
'name': { 'zh-CN': 'Grid-数据级联-任意父级联', 'en-US': 'Grid-data concatenation-any parent concatenation' },
'desc': {
'zh-CN':
@@ -22,7 +22,7 @@ export default {
'en-US':
'
You need to configure the edit-config object on the grid tag, and activeMethod before editing the event processing edit item data set. \nThe editor object is configured in the grid-column column. component is used to render the editing component. \nattrsConfigure cascading data. \nevents to set events. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/dataCascading/arbitraryCascade.vue']
+ 'codeFiles': ['cascade/arbitrary-cascade.vue']
}
],
apis: [{ 'name': 'grid-cascade', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-context-menu.js b/examples/sites/demos/pc/app/grid/webdoc/grid-context-menu.js
index b9e90433a..79d716e27 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-context-menu.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-context-menu.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'grid_Example-shortcutMenu-header-menu',
+ 'demoId': 'context-menu-header-menu',
'name': { 'zh-CN': 'Grid-右键菜单-表头菜单', 'en-US': 'Grid-right-click menu-header menu' },
'desc': {
'zh-CN':
@@ -11,10 +11,10 @@ export default {
'en-US':
'
Configure the :context-menu="{header: {options: headerMenus}, visibleMethod}" object to control the table header menu. In the \nheaderMenus, configure visible whether to display the menu and disabled whether to disable the menu. \n The visibleMethod method can be used to control menu permissions. \n@context-menu-click monitoring menu click event. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/shortcutMenu/header-menu.vue']
+ 'codeFiles': ['context-menu/header-menu.vue']
},
{
- 'demoId': 'grid_Example-shortcutMenu-footer-menu',
+ 'demoId': 'context-menu-footer-menu',
'name': { 'zh-CN': 'Grid-右键菜单-表尾菜单', 'en-US': 'Grid-right-click menu-table tail menu' },
'desc': {
'zh-CN':
@@ -22,10 +22,10 @@ export default {
'en-US':
'
The table footer menu can be displayed only when :context-menu="{body: {options: bodyMenus}}", show-footer, and :footer-method="footerMethod" are configured. \nThe :context-menu="{body: {options: bodyMenus}, footer: {options: footerMenus}, visibleMethod}&; objects are configured to control the table header menu. In the \nfooterMenus, configure visible whether to display the menu and disabled whether to disable the menu. \n The visibleMethod method can be used to control menu permissions. \n@context-menu-click monitoring menu click event. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/shortcutMenu/footer-menu.vue']
+ 'codeFiles': ['context-menu/footer-menu.vue']
},
{
- 'demoId': 'grid_Example-shortcutMenu-cell-menu',
+ 'demoId': 'context-menu-cell-menu',
'name': { 'zh-CN': 'Grid-右键菜单-单元格菜单', 'en-US': 'Grid-right-click menu-cell menu' },
'desc': {
'zh-CN':
@@ -33,10 +33,10 @@ export default {
'en-US':
'
Configure the context-menu="{body: {options: bodyMenus}, visibleMethod}" object to control the cell menu. In \nbodyMenus, set visible to display menus and disabled to disable menus. \n The visibleMethod method can be used to control menu permissions. Event triggered before the \n@cell-context-menu monitoring menu is displayed. \n@context-menu-click monitoring menu click event. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/shortcutMenu/cell-menu.vue']
+ 'codeFiles': ['context-menu/cell-menu.vue']
},
{
- 'demoId': 'grid_Example-shortcutMenu-menu-permissions',
+ 'demoId': 'context-menu-menu-permissions',
'name': { 'zh-CN': 'Grid-右键菜单-菜单权限', 'en-US': 'Grid-Right-click Menu-Menu Permission' },
'desc': {
'zh-CN':
@@ -44,7 +44,7 @@ export default {
'en-US':
'
Configure the :context-menu="{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}" object to control the table header menu. \nheader, bodyMenus, footer: visible indicates whether to display menus and disabled indicates whether to disable menus. \nUse the visibleMethod method to control menu permissions. Event triggered before the \n@cell-context-menu monitoring menu is displayed. \n@context-menu-click monitoring menu click event. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/shortcutMenu/menu-permissions.vue']
+ 'codeFiles': ['context-menu/menu-permissions.vue']
}
],
apis: [{ 'name': 'grid-context-menu', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-custom-style.js b/examples/sites/demos/pc/app/grid/webdoc/grid-custom-style.js
index d2aa623e9..630120962 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-custom-style.js
+++ b/examples/sites/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': '
通过 row-class-name 自定义设置表格的行样式
\n
设置行样式
\n',
- 'en-US': '
Set the row style of the table by row-class-name
\n
Set the row style
\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':
'
通过 header-cell-class-name 和 header-row-class-name 设置表头的单元格和行样式
\n
设置表头单元格样式
\n',
'en-US':
'
Set the cell and row styles of the table header through header-cell-class-name and header-row-class-name
\n
Set the cell style of the table header
\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':
+ '
通过 row-class-name 自定义设置表格的行样式
\n
通过 cell-class-name 自定义设置表格的单元格样式\n',
+ 'en-US': '
Set the row style of the table by row-class-name
\n
Set the row style
\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':
'
通过 footer-cell-class-name 和 footer-row-class-name 设置表尾的单元格和行样式
\n',
'en-US':
'
Use footer-cell-class-name and footer-row-class-name to set the cell and row styles at the end of the table
\n'
},
- 'codeFiles': ['custom-style/footer-style/footer-cell-style.vue']
+ 'codeFiles': ['custom-style/footer-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': '
通过 cell-class-name 自定义设置表格的单元格样式
\n',
- 'en-US': '
Set the cell style of the table by cell-class-name
\n'
- },
- 'codeFiles': ['custom-style/cell-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': '
通过 class-name 自定义设置表格的列样式
\n',
'en-US': '
Set the column style of the table by class-name
\n'
},
- 'codeFiles': ['column/class-name.vue']
+ 'codeFiles': ['custom-style/class-name.vue']
}
],
apis: [{ 'name': 'grid-custom-style', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-custom.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-custom.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-customized.js b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
similarity index 99%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-customized.js
rename to examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
index 25ec2f414..d6152deac 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-customized.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
@@ -181,5 +181,5 @@ export default {
'codeFiles': ['custom/reset-method.vue']
}
],
- apis: [{ 'name': 'grid-customized', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+ apis: [{ 'name': 'grid-custom', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.json.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.json.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-custom.json.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.json.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.json.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-custom.json.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-data-source.js b/examples/sites/demos/pc/app/grid/webdoc/grid-data-source.js
index a21ce3529..ad618b07e 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-data-source.js
+++ b/examples/sites/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': '
表格属性设置 data 开启双向绑定静态数据。
\n',
'en-US': '
Table attribute settingdataEnable bidirectional binding of static data.
\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':
"
表格属性设置 fetch-data 开启服务请求。表格首次加载服务数据的时机默认是在 mounted 阶段，如果开了 prefetch 开关就在 created 阶段开始加载。可以设置 prefetch 为数组，指定后端排序字段参数，作为数据接口方法参数 sortBy。例如：[{ property: 'name', order: 'desc' }]，参考示例
\n",
'en-US': '
Table attribute setting fetch-data enables the service request.
\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':
'
Table attribute auto-load specifies whether to enable the automatic request service. This parameter is valid when fetch-data is configured. In the following example, if auto-load is set to false, data will not be automatically loaded.
\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': '
通过表格属性 columns 设置表格列的配置信息
\n',
'en-US':
'
Set the configuration information of table columns through the table attribute columns
\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':
'
Asynchronous rendering configuration procedure:\n1. Set the table attribute is-async-column to enable asynchronous rendering. \n2. Set format-config to enable asynchronous rendering of data in the column.
\n'
},
- 'codeFiles': ['tiny-first-menu/column-asyn-rendering.vue']
+ 'codeFiles': ['data-source/column-asyn-rendering.vue']
},
{
- 'demoId': 'tiny-first-menu-defslot-protochain-fetch',
+ 'demoId': 'data-source-defslot-protochain-fetch',
'name': { 'zh-CN': '在默认插槽中使用复杂数据', 'en-US': '' },
'desc': {
'zh-CN':
'
兼容低版本的复杂数据访问（例如：row.attr1.attr2.attr3），参考示例。\n在列初始化过程中，使用 `skip` 插槽参数可以跳过默认插槽内容的执行，参考示例。\n在表格渲染过程中，没有提供这个参数，始终不会跳过默认插槽内容的执行。
\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': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js b/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js
index 369d40237..ef8983b7f 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js
+++ b/examples/sites/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-根据选择日期动态生成列',
'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/dynamicallyColumns.vue']
},
{
'demoId': 'column-columns-dynamic',
'name': { 'zh-CN': 'Grid-动态列数据', 'en-US': '' },
'desc': { 'zh-CN': '兼容低版本的动态列数据', 'en-US': '' },
'codeFiles': ['column/columns-dynamic.vue']
+ },
+ {
+ 'demoId': 'dynamically-columns-reverseRow',
+ 'name': { 'zh-CN': 'Grid-表格行列反转', 'en-US': 'Grid-Inverting Rows and Columns in a Table' },
+ 'desc': {
+ 'zh-CN':
+ '
需要在 grid 标签上配 :columns="tableColumn" :show-header="false"。点击“反转表格”按钮可查看效果，现阶段只能执行一次，执行多次会有问题。具体参考下面示例。
\n',
+ 'en-US':
+ "
You need to configure :columns="tableColumn" :show-header="false" on the grid 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.
\n"
+ },
+ 'codeFiles': ['dynamically-columns/reverseRow.vue']
}
],
apis: [{ 'name': 'grid-dynamically-columns', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js b/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js
index 630c20646..9396077f2 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js
@@ -3,7 +3,18 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-row-editing',
+ 'demoId': 'edit-cell-editing',
+ 'name': { 'zh-CN': '单元格编辑', 'en-US': 'Cell Edit' },
+ 'desc': {
+ 'zh-CN':
+ "
表格属性设置 edit-config 开启编辑模式，然后在该属性对象内设置 mode: 'cell' 开启行编辑，即：:edit-config="{ mode: 'cell' }"。\n表格列属性设置 show-icon 设置列头是否显示编辑图标，在编辑时有效。
\n",
+ 'en-US':
+ "
Table attribute setting edit-configEnable the editing mode, and then set mode:'cell' in the attribute object to enable line editing, that is, :edit-config="{mode: 'cell'}&; . \nTable Column Attribute Settingsshow-icon Sets whether to display the editing icon in the column header. This parameter is valid during editing.
\n"
+ },
+ 'codeFiles': ['edit/cell-editing.vue']
+ },
+ {
+ 'demoId': 'edit-row-editing',
'name': { 'zh-CN': '行编辑', 'en-US': 'Line Edit' },
'desc': {
'zh-CN':
@@ -11,7 +22,7 @@ export default {
'en-US':
"
Table attribute setting edit-configEnable the editing mode, and then set mode:'row' in the attribute object to enable row editing, that is, :edit-config="{mode:'row'}&; .
\n"
},
- 'codeFiles': ['tiny-first-menu/row-editing.vue']
+ 'codeFiles': ['edit/row-editing.vue']
},
{
'demoId': 'edit-revertData',
@@ -35,18 +46,7 @@ export default {
'codeFiles': ['edit/hasRowChange.vue']
},
{
- 'demoId': 'tiny-first-menu-cell-editing',
- 'name': { 'zh-CN': '单元格编辑', 'en-US': 'Cell Edit' },
- 'desc': {
- 'zh-CN':
- "
表格属性设置 edit-config 开启编辑模式，然后在该属性对象内设置 mode: 'cell' 开启行编辑，即：:edit-config="{ mode: 'cell' }"。\n表格列属性设置 show-icon 设置列头是否显示编辑图标，在编辑时有效。
\n",
- 'en-US':
- "
Table attribute setting edit-configEnable the editing mode, and then set mode:'cell' in the attribute object to enable line editing, that is, :edit-config="{mode: 'cell'}&; . \nTable Column Attribute Settingsshow-icon Sets whether to display the editing icon in the column header. This parameter is valid during editing.
\n"
- },
- 'codeFiles': ['tiny-first-menu/cell-editing.vue']
- },
- {
- 'demoId': 'methods-set-active-cell',
+ 'demoId': 'edit-set-active-cell',
'name': { 'zh-CN': '手动激活编辑', 'en-US': 'Manually Activate Edit' },
'desc': {
'zh-CN':
@@ -54,20 +54,10 @@ export default {
'en-US':
'The
setActiveCell(row, field) method activates editing of the specified cell. The setActiveRow(row) method activates row editing. If mode=cell is used, the first cell is activated by default.
\n'
},
- 'codeFiles': ['methods/set-active-cell.vue']
+ 'codeFiles': ['edit/set-active-cell.vue']
},
{
- 'demoId': 'tiny-first-menu-format-value',
- 'name': { 'zh-CN': '单元格格式化', 'en-US': 'Format Cell' },
- 'desc': {
- 'zh-CN': '
表格列属性 format-value 格式化单元格编辑器组件的传入值。
\n',
- 'en-US':
- '
Table Column Properties format-value Format the input value of the Cell Editor component.
\n'
- },
- 'codeFiles': ['tiny-first-menu/format-value.vue']
- },
- {
- 'demoId': 'tiny-first-menu-custom-editing',
+ 'demoId': 'edit-custom-editing',
'name': { 'zh-CN': '自定义编辑规则', 'en-US': 'Custom Editing Rule' },
'desc': {
'zh-CN':
@@ -75,10 +65,10 @@ export default {
'en-US':
'
Table attribute settingedit-configEnable the editing mode, and then set activeMethod custom editing rules in the attribute object.
\n'
},
- 'codeFiles': ['tiny-first-menu/custom-editing.vue']
+ 'codeFiles': ['edit/custom-editing.vue']
},
{
- 'demoId': 'tiny-first-menu-editor-is-salid-always',
+ 'demoId': 'edit-editor-is-salid-always',
'name': { 'zh-CN': '自定义编辑校验规则', 'en-US': 'Customized Editing Verification Rule' },
'desc': {
'zh-CN':
@@ -86,10 +76,10 @@ export default {
'en-US':
'
Table attribute settingedit-configEnable the editing mode and configure the edit-rules object to set the validation object and validation rule. Set isValidAlways in the editor object to enable real-time editing verification.
\n'
},
- 'codeFiles': ['tiny-first-menu/editor-is-salid-always.vue']
+ 'codeFiles': ['edit/editor-is-salid-always.vue']
},
{
- 'demoId': 'tiny-first-menu-status-of-editing',
+ 'demoId': 'edit-status-of-editing',
'name': { 'zh-CN': '开启编辑状态', 'en-US': 'Enable editing' },
'desc': {
'zh-CN':
@@ -97,16 +87,16 @@ export default {
'en-US':
'
Table attribute settingsedit-configEnable the editing mode, Set showStatus 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 true.
\n'
},
- 'codeFiles': ['tiny-first-menu/status-of-editing.vue']
+ 'codeFiles': ['edit/status-of-editing.vue']
},
{
- 'demoId': 'tiny-first-menu-status-of-noediting',
+ 'demoId': 'edit-status-of-noediting',
'name': { 'zh-CN': '关闭编辑状态', 'en-US': 'Disable editing' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/status-of-noediting.vue']
+ 'codeFiles': ['edit/status-of-noediting.vue']
},
{
- 'demoId': 'tiny-first-menu-trigger-mode-for-editing',
+ 'demoId': 'edit-trigger-mode-for-editing',
'name': { 'zh-CN': '点击触发编辑', 'en-US': 'Click to trigger editing' },
'desc': {
'zh-CN':
@@ -114,23 +104,23 @@ export default {
'en-US':
'
Table attribute settingedit-configEnable the editing mode, and then set trigger in the attribute object to modify the triggering mode. The options are as follows: click trigger (click), double-click trigger (dblclick), and manual trigger (manual). The default value is click trigger.
\n'
},
- 'codeFiles': ['tiny-first-menu/trigger-mode-for-editing.vue']
+ 'codeFiles': ['edit/trigger-mode-for-editing.vue']
},
{
- 'demoId': 'tiny-first-menu-trigger-mode-db-editing',
+ 'demoId': 'edit-trigger-mode-db-editing',
'name': { 'zh-CN': '双击触发编辑', 'en-US': 'Double-click to trigger editing' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/trigger-mode-db-editing.vue']
+ 'codeFiles': ['edit/trigger-mode-db-editing.vue']
},
{
- 'demoId': 'tiny-first-menu-trigger-mode-hm-editing',
+ 'demoId': 'edit-trigger-mode-hm-editing',
'name': { 'zh-CN': '手动触发编辑', 'en-US': 'Manually triggered editing' },
'desc': {
'zh-CN':
'在点击其他行或表格外部时，编辑器会自动关闭。设置
editConfig.autoClear 为
false 可以防止编辑器自动关闭',
'en-US': 'For details, see the following example.'
},
- 'codeFiles': ['tiny-first-menu/trigger-mode-hm-editing.vue']
+ 'codeFiles': ['edit/trigger-mode-hm-editing.vue']
}
],
apis: [{ 'name': 'grid-edit', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
index 91dfff49a..64340e62c 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'grid_Example-gridEdit-inner-editor',
+ 'demoId': 'editor-inner-editor',
'name': { 'zh-CN': 'Grid-编辑器-内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
'desc': {
'zh-CN':
@@ -11,10 +11,10 @@ export default {
'en-US':
'Configure
edit-config on the
grid label. In the grid-column column, configure the editor object, component render the built-in editing component, and events configure component events. For details, see the following example.
\n
Description
\n
The built-in editor supports only the Input and Select components. For details about how to use other components, see the custom editor
\n
\n'
},
- 'codeFiles': ['grid_Example/gridEdit/inner-editor.vue']
+ 'codeFiles': ['editor/inner-editor.vue']
},
{
- 'demoId': 'grid_Example-gridEdit-custom-editor',
+ 'demoId': 'editor-custom-editor',
'name': { 'zh-CN': 'Grid-编辑器-自定义编辑器', 'en-US': 'Grid-Editor-Custom Editor' },
'desc': {
'zh-CN':
@@ -22,20 +22,20 @@ export default {
'en-US':
'Configure
edit-config on the
grid label. \n Configure the editor object in the grid-column column and render the custom editing component. \nThe default edit box is a small box. You can modify the edit box based on the style. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/gridEdit/custom-editor.vue']
+ 'codeFiles': ['editor/custom-editor.vue']
},
{
- 'demoId': 'grid_Example-gridEdit-custom-editor-select',
+ 'demoId': 'editor-custom-editor-select',
'name': { 'zh-CN': '引入 TINY 组件作为编辑器', 'en-US': 'Introducing the TINY component as the editor' },
'desc': {
'zh-CN': '
通过 属性配置 方式引入 TinyVue Select 组件。
\n',
'en-US':
'
Introduces the TinyVue Select component through attribute configuration.
\n'
},
- 'codeFiles': ['grid_Example/gridEdit/custom-editor-select.vue']
+ 'codeFiles': ['editor/custom-editor-select.vue']
},
{
- 'demoId': 'edit-mutil-render',
+ 'demoId': 'editor-mutil-render',
'name': { 'zh-CN': 'Grid-编辑器-下拉多选', 'en-US': 'Grid-editor-drop-down list' },
'desc': {
'zh-CN':
@@ -43,10 +43,10 @@ export default {
'en-US':
'
When multiple options are selected from the drop-down list box, cell rendering needs to be implemented. In the following example, format-text is used to render multiple enumerated values. You can also use renderer to implement customized components for rendering.
\n'
},
- 'codeFiles': ['edit/mutil-render.vue']
+ 'codeFiles': ['editor/mutil-render.vue']
},
{
- 'demoId': 'news-editor-events',
+ 'demoId': 'editor-editor-events',
'name': { 'zh-CN': 'Grid-编辑器-自定义编辑器', 'en-US': 'Grid-Editor-Custom Editor' },
'desc': {
'zh-CN':
@@ -54,10 +54,10 @@ export default {
'en-US':
'Configure
edit-config on the
grid label. \n Configure the editor object in the grid-column column, component render the custom editing component, and configure the events of the editor component through its events option. \nThe default edit box is a small box. You can modify the edit box based on the style. \nFor details, see the following example.
\n'
},
- 'codeFiles': ['news/editor-events.vue']
+ 'codeFiles': ['editor/editor-events.vue']
},
{
- 'demoId': 'grid_Example-gridEdit-popeditor-in-grid',
+ 'demoId': 'editor-popeditor-in-grid',
'name': { 'zh-CN': 'Popeditor 弹窗编辑', 'en-US': 'Popeditor pop-up window editing' },
'desc': {
'zh-CN':
@@ -65,36 +65,36 @@ export default {
'en-US':
'
Configure the editor attribute on the grid-column column element. In this object, you can specify component as Popeditor and attrs as attributes of the Popeditor component. Note that after the Popeditor component is introduced, it needs to be instantiated in data().
\n'
},
- 'codeFiles': ['grid_Example/gridEdit/popeditor-in-grid.vue']
+ 'codeFiles': ['editor/popeditor-in-grid.vue']
},
{
- 'demoId': 'grid_Example-gridEdit-popeditor-in-grid-remote-search',
+ 'demoId': 'editor-popeditor-in-grid-remote-search',
'name': {
'zh-CN': 'Popeditor 弹窗编辑，配置远程搜索',
'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
},
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['grid_Example/gridEdit/popeditor-in-grid-remote-search.vue']
+ 'codeFiles': ['editor/popeditor-in-grid-remote-search.vue']
},
{
- 'demoId': 'grid_Example-gridEdit-editor-bg',
+ 'demoId': 'editor-editor-bg',
'name': { 'zh-CN': '用户维护编辑状态', 'en-US': '' },
'desc': {
'zh-CN':
"
假设 名称字段 和 id 为 '3' 的行 不可编辑，可以通过 editConfig.activeMethod 设置其单元格不可进入编辑，通过 cellClassName 设置其单元格的背景底色
",
'en-US': ''
},
- 'codeFiles': ['grid_Example/gridEdit/editor-bg.vue']
+ 'codeFiles': ['editor/editor-bg.vue']
},
{
- 'demoId': 'grid_Example-gridEdit-custom-edit',
+ 'demoId': 'editor-custom-edit',
'name': { 'zh-CN': '不可编辑背景色', 'en-US': '' },
'desc': {
'zh-CN':
'
表格编辑器场景，在表格内部维护编辑状态，只能使整行或单个单元格处于编辑状态。如果需要使多行处于编辑状态，需要使用渲染器自行实现，在自定义编辑状态时，表格内置的一些编辑行为，例如表头是否显示必填星号、编辑规则等将不可用，需要自行实现，参考示例：
',
'en-US': ''
},
- 'codeFiles': ['grid_Example/gridEdit/custom-edit.vue']
+ 'codeFiles': ['editor/custom-edit.vue']
}
],
apis: [{ 'name': 'grid-editor', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-empty-data-tip.js b/examples/sites/demos/pc/app/grid/webdoc/grid-empty-data-tip.js
index b7b04b023..801efb514 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-empty-data-tip.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-empty-data-tip.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-empty-data-tip',
+ 'demoId': 'empty-empty-data-tip',
'name': { 'zh-CN': '自定义提示', 'en-US': 'Custom Prompt' },
'desc': {
'zh-CN':
@@ -11,16 +11,16 @@ export default {
'en-US':
'
When the data is empty, the icon + text prompt is displayed by default. You can also set the slot v-slot:empty or the render-empty attribute to define the prompt content.
\n'
},
- 'codeFiles': ['tiny-first-menu/empty-data-tip.vue']
+ 'codeFiles': ['empty/empty-data-tip.vue']
},
{
- 'demoId': 'tiny-first-menu-empty-data-default-tip',
+ 'demoId': 'empty-empty-data-default-tip',
'name': { 'zh-CN': '默认提示', 'en-US': 'Default Prompt' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/empty-data-default-tip.vue']
+ 'codeFiles': ['empty/empty-data-default-tip.vue']
},
{
- 'demoId': 'tiny-first-menu-empty-data-iscenter',
+ 'demoId': 'empty-empty-data-iscenter',
'name': { 'zh-CN': '固定居中', 'en-US': 'Fix Center' },
'desc': {
'zh-CN':
@@ -28,7 +28,7 @@ export default {
'en-US':
'
When is-center-empty is set to true, drag the horizontal scroll bar to keep the empty data prompt so that the final data is displayed in the center of the table width
\n'
},
- 'codeFiles': ['tiny-first-menu/empty-data-iscenter.vue']
+ 'codeFiles': ['empty/empty-data-iscenter.vue']
}
],
apis: [{ 'name': 'grid-empty-data-tip', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-event.js b/examples/sites/demos/pc/app/grid/webdoc/grid-event.js
index f75953e92..d97b390af 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-event.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-event.js
@@ -267,7 +267,7 @@ export default {
'codeFiles': ['event/valid-error-event.vue']
},
{
- 'demoId': 'tiny-first-menu-get-row-method',
+ 'demoId': 'event-get-row-method',
'name': { 'zh-CN': '获取表格行方法', 'en-US': 'Obtain table row method' },
'desc': {
'zh-CN':
@@ -275,7 +275,7 @@ export default {
'en-US':
'
Method for obtaining a row:
\n
getCurrentRow Obtain the current row \ngetRowIndex Obtain the current row number \ngetRadioRow Radio Select a single row \ngetRowById Obtain the current row based on the row ID \ngetRowNode Obtain the row information based on the tr element
\n
\n'
},
- 'codeFiles': ['tiny-first-menu/get-row-method.vue']
+ 'codeFiles': ['event/get-row-method.vue']
}
],
apis: [{ 'name': 'grid-event', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-footer.js b/examples/sites/demos/pc/app/grid/webdoc/grid-footer.js
index 9cd49812e..5eeb7a1a7 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-footer.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-footer.js
@@ -2,28 +2,23 @@ export default {
column: '1',
owner: '',
demos: [
- {
- 'demoId': 'footer-footer-summation',
- 'name': { 'zh-CN': '表尾统计', 'en-US': 'Table tail statistics' },
- 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['footer/footer-summation.vue']
- },
{
'demoId': 'footer-footer-summation-empty',
'name': { 'zh-CN': '表尾统计（空数据）', 'en-US': 'Table tail statistics (empty data)' },
- 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+ 'desc': {
+ 'zh-CN': '通过
footer-method 和
show-footer 配置自定义统计。',
+ 'en-US': 'For details, see the following example.'
+ },
'codeFiles': ['footer/footer-summation-empty.vue']
},
{
- 'demoId': 'footer-footer-class-name',
- 'name': { 'zh-CN': '表尾class类名', 'en-US': 'Table tail class name' },
+ 'demoId': 'footer-configuration-summary',
+ 'name': { 'zh-CN': '设置配置式的统计', 'en-US': 'Set Profile Statistics' },
'desc': {
- 'zh-CN':
- '
\n通过表格列属性 footer-class-name 给表尾的单元格附加 className，也可以是函数 Function({$rowIndex, column, columnIndex, $columnIndex})。\n
\n',
- 'en-US':
- '
\nAdd a class name to the cell at the end of the table through the table column attribute footer-class-name or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \n
\n'
+ 'zh-CN': '
通过 summary-config 设置配置式的统计。
\n',
+ 'en-US': '
Set the profile statistics using summary-config.
\n'
},
- 'codeFiles': ['footer/footer-class-name.vue']
+ 'codeFiles': ['footer/configuration-summary.vue']
},
{
'demoId': 'footer-footer-row-or-column-span',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.js b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.js
deleted file mode 100644
index fdd6933cb..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-border.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
- column: '1',
- owner: '',
- demos: [
- {
- 'demoId': 'tiny-first-menu-grid-border',
- 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
- 'desc': {
- 'zh-CN': '
表格属性设置 border 给表格加上边框。
\n',
- 'en-US': '
Table property setting borderAdds a border to the table.
\n'
- },
- 'codeFiles': ['tiny-first-menu/grid-border.vue']
- }
- ],
- apis: [{ 'name': 'grid-grid-border', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
-}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.js b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.js
deleted file mode 100644
index 714e23e52..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
- column: '1',
- owner: '',
- demos: [
- {
- 'demoId': 'tiny-first-menu-grid-size',
- 'name': { 'zh-CN': 'size', 'en-US': 'size' },
- 'desc': {
- 'zh-CN': '
表格设置 size 属性调整表格尺寸大小。
\n',
- 'en-US': '
Table settingssize property adjusts the table size.
\n'
- },
- 'codeFiles': ['tiny-first-menu/grid-size.vue']
- }
- ],
- apis: [{ 'name': 'grid-grid-size', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
-}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.cn.md
deleted file mode 100644
index 50af58c04..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.js b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.js
deleted file mode 100644
index be671e099..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
- column: '1',
- owner: '',
- demos: [
- {
- 'demoId': 'stripe-stripe',
- 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
- 'desc': {
- 'zh-CN':
- '
stripe 是否带有斑马纹 默认不开启。设置 :stripe="true" 时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)
\n',
- 'en-US':
- 'Whether the
stripe has zebra prints is disabled by default. Enabled when :stripe="true" is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.)
\n'
- },
- 'codeFiles': ['stripe/stripe.vue']
- }
- ],
- apis: [{ 'name': 'grid-grid-stripe', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
-}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.json.cn.md
deleted file mode 100644
index f65bd05ca..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.json.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.json.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-stripe.json.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-header.js b/examples/sites/demos/pc/app/grid/webdoc/grid-header.js
index af70bf4ca..5e04975a3 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-header.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-header.js
@@ -41,16 +41,6 @@ export default {
'
Add the class name to the cell of the table header through the column attribute header-class-name, or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \n
\n'
},
'codeFiles': ['header/slot-header.vue']
- },
- {
- 'demoId': 'header-header-class-name',
- 'name': { 'zh-CN': '基本说明', 'en-US': '' },
- 'desc': {
- 'zh-CN':
- '
通过列属性 header-class-name 给表头的单元格附加 className，也可以是函数 Function({$rowIndex, column, columnIndex, $columnIndex})。\n
\n',
- 'en-US': ''
- },
- 'codeFiles': ['header/header-class-name.vue']
}
],
apis: [{ 'name': 'grid-header', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-highlight.js b/examples/sites/demos/pc/app/grid/webdoc/grid-highlight.js
index f36af64b9..40631e04b 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-highlight.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-highlight.js
@@ -14,13 +14,13 @@ export default {
'codeFiles': ['highlight/highlight-hover-row.vue']
},
{
- 'demoId': 'methods-set-current-row',
+ 'demoId': 'highlight-set-current-row',
'name': { 'zh-CN': '设置指定行高亮', 'en-US': 'Highlight a specified line' },
'desc': {
'zh-CN': '
setCurrentRow(row) 可设置某一行为高亮状态。
\n',
'en-US': 'The
setCurrentRow(row) can be used to set the highlight status of a line.
\n'
},
- 'codeFiles': ['methods/set-current-row.vue']
+ 'codeFiles': ['highlight/set-current-row.vue']
},
{
'demoId': 'highlight-highlight-current-row',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js b/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
index 2bf848911..39710fa6a 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
@@ -3,10 +3,10 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-export-excel',
+ 'demoId': 'import-export-export-excel',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/export-excel.vue']
+ 'codeFiles': ['import-export/export-excel.vue']
}
],
apis: [{ 'name': 'grid-import-export', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.cn.md
deleted file mode 100644
index 50af58c04..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.json.cn.md
deleted file mode 100644
index f65bd05ca..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.json.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.json.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.json.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.js b/examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.js
similarity index 66%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.js
rename to examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.js
index 213a972f6..36faa9415 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.js
@@ -3,21 +3,21 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-grid-loading-off-tip',
+ 'demoId': 'loading-grid-loading-off-tip',
'name': { 'zh-CN': '关闭加载中状态', 'en-US': 'Disable loading status' },
'desc': {
'zh-CN': '
表格属性设置 loading 开启或关闭加载状态，默认值为 false 不开启。
\n',
'en-US':
'
Table attribute setting loading Enables or disables loading. The default value is false.
\n'
},
- 'codeFiles': ['tiny-first-menu/grid-loading-off-tip.vue']
+ 'codeFiles': ['loading/grid-loading-off-tip.vue']
},
{
- 'demoId': 'tiny-first-menu-grid-loading-tip',
+ 'demoId': 'loading-grid-loading-tip',
'name': { 'zh-CN': '开启加载中状态', 'en-US': 'Enable loading status' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/grid-loading-tip.vue']
+ 'codeFiles': ['loading/grid-loading-tip.vue']
}
],
- apis: [{ 'name': 'grid-grid-loading-tip', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+ apis: [{ 'name': 'grid-loading-tip', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.json.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.json.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.json.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.json.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-loading-tip.json.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-loading-tip.json.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.js b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
similarity index 88%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.js
rename to examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
index 6c2c3b0f7..61193f6de 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-keyboard.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'keyboard-navigation',
+ 'demoId': 'mouse-keyboard-keyboard-navigation',
'name': { 'zh-CN': '键盘导航', 'en-US': 'Keyboard Navigation' },
'desc': {
'zh-CN':
@@ -11,26 +11,26 @@ export default {
'en-US':
'
Key Description
\n
| Arrow Up ↑ | Moves to the cell above the current active cell |\n| Arrow Down ← | Moves to the cell below the current active cell |\n| Arrow Left ← | Moves to the cell on the left of the current active cell |\n| Arrow Right → | Moves to the right of the current active cell |\n| Tab | Moves to the cell on the right of the selected or active cell. If the last column is displayed and the next row exists, move from the next row. |\n| Tab + Shift | Moves to the cell on the left of the selected or active cell. If the first column is displayed and there is a previous row, move the cell from the previous row. |\n| Spacebar | If the cell is a check box or option button, switch the selected status. |\n| Enter | Cancel the editing and move the cell to the cell under the current active cell. |\n| Delete | Clear the content. | \n| Backspace | Clear the contents and activate the selected cell to the editing state. |\n| F2 | Activate cell editing. |\n| Esc | Cancel cell editing. |\n| Page Up | Page Up | Page Down | Page Down | Page Down | Page Down | \n| Home | Scroll to the top |\n| End | Scroll to the bottom |
\n
\n'
},
- 'codeFiles': ['keyboard-navigation.vue']
+ 'codeFiles': ['mouse-keyboard/keyboard-navigation.vue']
},
{
- 'demoId': 'keyboard-config',
+ 'demoId': 'mouse-keyboard-keyboard-config',
'name': { 'zh-CN': '设置按键配置项', 'en-US': 'Set key configuration items' },
'desc': {
'zh-CN': '
表格属性 keyboard-config 设置按键配置项。\n
\n',
'en-US': '
Table propertykeyboard-configSet key configuration items. \n
\n'
},
- 'codeFiles': ['keyboard-config.vue']
+ 'codeFiles': ['mouse-keyboard/keyboard-config.vue']
},
{
- 'demoId': 'mouse-config',
+ 'demoId': 'mouse-keyboard-mouse-config',
'name': { 'zh-CN': '设置鼠标配置项', 'en-US': 'Setting Mouse Configuration Items' },
'desc': {
'zh-CN': '
表格属性 mouse-config 设置鼠标配置项。\n
\n',
'en-US': '
Table propertymouse-configSet the mouse configuration item. \n
\n'
},
- 'codeFiles': ['mouse-config.vue']
+ 'codeFiles': ['mouse-keyboard/mouse-config.vue']
}
],
- apis: [{ 'name': 'grid-keyboard', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+ apis: [{ 'name': 'grid-mouse-keyboard', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.json.cn.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.json.cn.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.json.cn.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.json.en.md
similarity index 100%
rename from examples/sites/demos/pc/app/grid/webdoc/grid-grid-size.json.en.md
rename to examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.json.en.md
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-nested-grid.js b/examples/sites/demos/pc/app/grid/webdoc/grid-nested-grid.js
index 4fac6229b..c7d057ba7 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-nested-grid.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-nested-grid.js
@@ -3,37 +3,37 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'grid_Example-nestedGrid',
+ 'demoId': 'nested-table-nestedGrid',
'name': { 'zh-CN': '嵌套表格', 'en-US': 'Nested Table' },
'desc': {
'zh-CN': '
通过在默认插槽 default中使用表格组件，实现嵌套表格功能。
\n',
'en-US':
'
Implements the nested table function by using the table component in the default slot default.
\n'
},
- 'codeFiles': ['grid_Example/nestedGrid.vue']
+ 'codeFiles': ['nested-table/nestedGrid.vue']
},
{
- 'demoId': 'expand-hasRowExpand',
+ 'demoId': 'nested-table-hasRowExpand',
'name': { 'zh-CN': '检查行是否已展开', 'en-US': 'Check whether the row is expanded.' },
'desc': {
'zh-CN': '
通过调用 hasRowExpand(row) 方法可以检查行是否已展开，参数 row 为行数据对象。
\n',
'en-US':
'
You can invoke the hasRowExpand(row) method to check whether a row is expanded. The row parameter is the row data object.
\n'
},
- 'codeFiles': ['expand/hasRowExpand.vue']
+ 'codeFiles': ['nested-table/hasRowExpand.vue']
},
{
- 'demoId': 'methods-set-all-row-expansion',
+ 'demoId': 'nested-table-set-all-row-expansion',
'name': { 'zh-CN': '设置展开所有行', 'en-US': 'Set to expand all lines' },
'desc': {
'zh-CN': '
通过调用 setAllRowExpansion(checked) 方法可设置所有行的展开与否。
\n',
'en-US':
'
You can invoke the setAllRowExpansion(checked) method to set whether to expand or not all rows.
\n'
},
- 'codeFiles': ['methods/set-all-row-expansion.vue']
+ 'codeFiles': ['nested-table/set-all-row-expansion.vue']
},
{
- 'demoId': 'methods-set-row-expansion',
+ 'demoId': 'nested-table-set-row-expansion',
'name': { 'zh-CN': '设置展开指定行', 'en-US': 'Set to expand a specified line' },
'desc': {
'zh-CN':
@@ -41,17 +41,17 @@ export default {
'en-US':
'
You can invoke the setRowExpansion(rows, checked) method to expand a specified row. The second parameter specifies whether to expand a specified row. When expanding a specified row, you can invoke the clearRowExpand() method to close the expanded row.
\n'
},
- 'codeFiles': ['methods/set-row-expansion.vue']
+ 'codeFiles': ['nested-table/set-row-expansion.vue']
},
{
- 'demoId': 'methods-toggle-row-expansion',
+ 'demoId': 'nested-table-toggle-row-expansion',
'name': { 'zh-CN': '手动切换展开行', 'en-US': 'Manually switch to expand rows' },
'desc': {
'zh-CN': '
通过调用 toggleRowExpansion(row) 方法可手动切换展开行。
\n',
'en-US':
'
You can manually switch between expanded rows by invoking the toggleRowExpansion(row) method.
\n'
},
- 'codeFiles': ['methods/toggle-row-expansion.vue']
+ 'codeFiles': ['nested-table/toggle-row-expansion.vue']
}
],
apis: [{ 'name': 'grid-nested-grid', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-operation-column.js b/examples/sites/demos/pc/app/grid/webdoc/grid-operation-column.js
index 2bb161718..f25c935e9 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-operation-column.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-operation-column.js
@@ -3,22 +3,56 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-default-serial-column',
- 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+ 'demoId': 'operation-column-clear-and-set-radio-row',
+ 'name': { 'zh-CN': '单元项操作', 'en-US': 'Basic Usage' },
'desc': {
- 'zh-CN': '
表格列属性设置 type="radio" 显示单选列。
\n',
+ 'zh-CN':
+ '
表格列属性设置 type="radio" 显示单选列。setRadioRow(row) 用于单选行，设置某一行为选中状态。clearRadioRow(row) 用于取消单选行的选中。
\n',
'en-US': '
Table column property setting type="radio" Display radio columns.
\n'
},
- 'codeFiles': ['tiny-first-menu/default-serial-column.vue']
+ 'codeFiles': ['operation-column/clear-and-set-radio-row.vue']
},
{
- 'demoId': 'tiny-first-menu-clearRadioRow',
- 'name': { 'zh-CN': '手动取消单选行', 'en-US': 'Manually Canceling a Row' },
- 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/clearRadioRow.vue']
+ 'demoId': 'operation-column-radio-config',
+ 'name': { 'zh-CN': '单选配置项', 'en-US': 'Disable a single option' },
+ 'desc': {
+ 'zh-CN':
+ '
radio-config 配置项,可以配置单选框的默认选中项和禁用配置等特性。单选模式，通过 radio-config 配置项的属性 checkMethod ，传入自定义方法判断哪些数据项被禁用，方法会判断每个数据项，需返回值为 true 或者 false，代表此数据项启用或者禁用。
\n',
+ 'en-US':
+ '
Single choice mode. The attribute checkMethod of the radio-config configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true or false, the data item is enabled or disabled.
\n'
+ },
+ 'codeFiles': ['operation-column/radio-config.vue']
},
{
- 'demoId': 'tiny-first-menu-gridPagerReserve',
+ 'demoId': 'operation-column-selection-operation',
+ 'name': { 'zh-CN': '多选项操作', 'en-US': 'Manually Cancel Multiple Rows' },
+ 'desc': {
+ 'zh-CN': `
+ 表格列属性设置 type="selection" 显示多选列。
+ setAllSelection(checked) 用于多选行，可设置所有行的选中状态。\n
+ clearSelection(checked) 用于多选行，可以手动取消多选行选中。\n
+ setAllSelection(checked) 用于多选行，可设置所有行的选中状态。\n
+ toggleAllSelection() 方法可直接切换所有行的选中状态。\n
+ toggleRowSelection(row) 方法可直接切换某一行的选中状态。
+
TIP
\n
setSelection 方法不会触发 select-change 事件，只有点击才会触发。
+ \n`,
+ 'en-US': 'For details, see the following example.'
+ },
+ 'codeFiles': ['operation-column/selection-operation.vue']
+ },
+ {
+ 'demoId': 'operation-column-selection-config',
+ 'name': { 'zh-CN': '多选配置项', 'en-US': 'User-defined Operation Column Content' },
+ 'desc': {
+ 'zh-CN':
+ '
多选模式，通过 select-config 配置项的属性 checkMethod ，传入自定义方法判断哪些数据项被禁用，方法会判断每个数据项，需返回值为 true 或者 false，代表此数据项启用或者禁用。通过 select-config 配置项的属性checkField指定行数据的某个字段去决定这行数据的选中状态（并且选中状态和这个字段是双向绑定的）。
\n',
+ 'en-US':
+ '
Set the customized operation column by slot, that is, <tiny-grid-column> customized operation column content </tiny-grid-column> .
\n'
+ },
+ 'codeFiles': ['operation-column/selection-config.vue']
+ },
+ {
+ 'demoId': 'operation-column-grid-pager-reserve',
'name': { 'zh-CN': '翻页后保留选中状态', 'en-US': 'Manually select a line' },
'desc': {
'zh-CN':
@@ -26,109 +60,7 @@ export default {
'en-US':
'
setRadioRow(row) is used to select a single line and set the selected status of a line.
\n'
},
- 'codeFiles': ['tiny-first-menu/gridPagerReserve.vue']
- },
- {
- 'demoId': 'methods-set-radio-row',
- 'name': { 'zh-CN': '手动选中某一行', 'en-US': 'Single-choice configuration item' },
- 'desc': {
- 'zh-CN': '
setRadioRow(row) 用于单选行，设置某一行为选中状态。
\n',
- 'en-US':
- 'The
radio-config configuration item can be used to configure the default selected and disabled options of the option button.
\n'
- },
- 'codeFiles': ['methods/set-radio-row.vue']
- },
- {
- 'demoId': 'tiny-first-menu-radio-config',
- 'name': { 'zh-CN': '单选配置项', 'en-US': 'Disable a single option' },
- 'desc': {
- 'zh-CN': '
radio-config 配置项,可以配置单选框的默认选中项和禁用配置等特性。
\n',
- 'en-US':
- '
Single choice mode. The attribute checkMethod of the radio-config configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true or false, the data item is enabled or disabled.
\n'
- },
- 'codeFiles': ['tiny-first-menu/radio-config.vue']
- },
- {
- 'demoId': 'disable-radio',
- 'name': { 'zh-CN': '单选禁用', 'en-US': 'Display Multiple Select Columns' },
- 'desc': {
- 'zh-CN':
- '
单选模式，通过 radio-config 配置项的属性 checkMethod ，传入自定义方法判断哪些数据项被禁用，方法会判断每个数据项，需返回值为 true 或者 false，代表此数据项启用或者禁用。
\n',
- 'en-US':
- '
Table column attribute setting type="selection" Display multiple columns.
\n'
- },
- 'codeFiles': ['disable-radio.vue']
- },
- {
- 'demoId': 'tiny-first-menu-custom-serial-column',
- 'name': { 'zh-CN': '显示多选列', 'en-US': 'Manually Cancel Multiple Rows' },
- 'desc': {
- 'zh-CN': '
表格列属性设置 type="selection" 显示多选列。
\n',
- 'en-US': 'For details, see the following example.'
- },
- 'codeFiles': ['tiny-first-menu/custom-serial-column.vue']
- },
- {
- 'demoId': 'tiny-first-menu-clearSelection',
- 'name': { 'zh-CN': '手动取消多选行', 'en-US': 'Manually select all lines' },
- 'desc': {
- 'zh-CN': '详细用法参考如下示例',
- 'en-US':
- '
setAllSelection(checked) is used to select multiple rows. You can set the selected status of all rows.
\n'
- },
- 'codeFiles': ['tiny-first-menu/clearSelection.vue']
- },
- {
- 'demoId': 'methods-set-all-selection',
- 'name': { 'zh-CN': '手动选中所有行', 'en-US': 'Manually select a specified line' },
- 'desc': {
- 'zh-CN': '
setAllSelection(checked) 用于多选行，可设置所有行的选中状态。
\n',
- 'en-US':
- '
setSelection(rows, checked) is used to select multiple lines. You can set the selected status of a specified line. The first parameter can be transferred to an object or array. If an object is used, select a single line. If an array is used, select multiple lines. The second parameter indicates whether to select or not. The
\n
TIP
\n
setSelection method does not trigger the select-change event. It is triggered only when you click it.
In multi-selection mode, the checkField attribute of the select-config configuration item determines the selection status of a row of data. (and the selected state and this field are bidirectionally bound).
\n
\n'
- },
- 'codeFiles': ['methods/set-all-selection.vue']
- },
- {
- 'demoId': 'methods-set-selection',
- 'name': { 'zh-CN': '手动选中指定行', 'en-US': 'Manually switch the selection status of all rows.' },
- 'desc': {
- 'zh-CN':
- '
setSelection(rows, checked) 用于多选行，可设置指定行为选中状态，第一个参数可传入对象或数组，如果是对象则选择单行，如果是数组则选择多行，第二个参数为选中与否。
\n
TIP
\n
setSelection 方法不会触发 select-change 事件，只有点击才会触发。
多选模式，通过 select-config 配置项的属性checkField指定行数据的某个字段去决定这行数据的选中状态（并且选中状态和这个字段是双向绑定的）。
\n
\n',
- 'en-US':
- 'The
toggleAllSelection() method directly switches the selection status of all rows.
\n'
- },
- 'codeFiles': ['methods/set-selection.vue']
- },
- {
- 'demoId': 'methods-toggle-all-selection',
- 'name': { 'zh-CN': '手动切换所有行选中状态', 'en-US': 'Manually switch the selected status of a specified row.' },
- 'desc': {
- 'zh-CN': '
toggleAllSelection() 方法可直接切换所有行的选中状态。
\n',
- 'en-US':
- 'The
toggleRowSelection(row) method directly switches the selection status of a row.
\n'
- },
- 'codeFiles': ['methods/toggle-all-selection.vue']
- },
- {
- 'demoId': 'methods-toggle-row-selection',
- 'name': { 'zh-CN': '手动切换指定行选中状态', 'en-US': 'Multi-choice disabled' },
- 'desc': {
- 'zh-CN': '
toggleRowSelection(row) 方法可直接切换某一行的选中状态。
\n',
- 'en-US':
- '
Multi-choice mode. The attribute checkMethod of the select-config configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true or false, the data item is enabled or disabled.
\n'
- },
- 'codeFiles': ['methods/toggle-row-selection.vue']
- },
- {
- 'demoId': 'disable-selection',
- 'name': { 'zh-CN': '多选禁用', 'en-US': 'User-defined Operation Column Content' },
- 'desc': {
- 'zh-CN':
- '
多选模式，通过 select-config 配置项的属性 checkMethod ，传入自定义方法判断哪些数据项被禁用，方法会判断每个数据项，需返回值为 true 或者 false，代表此数据项启用或者禁用。
\n',
- 'en-US':
- '
Set the customized operation column by slot, that is, <tiny-grid-column> customized operation column content </tiny-grid-column> .
\n'
- },
- 'codeFiles': ['disable-selection.vue']
+ 'codeFiles': ['operation-column/grid-pager-reserve.vue']
},
{
'demoId': 'operation-column-custom-operation-column',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js b/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js
index 563e25521..1d44247f7 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'grid_Example-gridRenderer-inner-renderer',
+ 'demoId': 'renderer-inner-renderer',
'name': { 'zh-CN': '内置渲染器', 'en-US': 'Built-in Renderer' },
'desc': {
'zh-CN':
@@ -11,10 +11,10 @@ export default {
'en-US':
'
The built-in renderer sets the display obtaining type of the current table column. \n Configure the format-text object in the grid-column column to control the data format. The options of
\n
TIP
\n
format-text are as follows:
\n
\ninteger: displayed as an integer. number: The value is displayed as a decimal. money: displays the amount of money. - rate: The data is displayed as a percentage.
\n- filesize: indicates the file size.
\n- boole: displays the icon with a pair or cross.
\n- date: indicates the year, month, and day.
\n- dateTime: indicates the year, month, day, hour, and minute.
\n- longDateTime: year, month, day, hour, minute, and second.
\n- time: time and hour.
\n- longTime: hour, minute, and second.
\n- yearMonth: displays the adult month.
\n- enum: Queries the text to be displayed based on the data value.
\n- ellipsis: displays the omitted content. When you move the cursor to the cell, the complete content is displayed. The len attribute of format must also be configured.
\n
\n
\n'
},
- 'codeFiles': ['grid_Example/gridRenderer/inner-renderer.vue']
+ 'codeFiles': ['renderer/inner-renderer.vue']
},
{
- 'demoId': 'grid_Example-gridRenderer-custom-renderer',
+ 'demoId': 'renderer-custom-renderer',
'name': { 'zh-CN': '自定义渲染器', 'en-US': 'Custom Renderer' },
'desc': {
'zh-CN':
@@ -22,10 +22,10 @@ export default {
'en-US':
'
The custom renderer can customize the rendering of cells or a vue component. Configure renderer in the grid-column column to support method and object configuration. For details, see the following example.
\n'
},
- 'codeFiles': ['grid_Example/gridRenderer/custom-renderer.vue']
+ 'codeFiles': ['renderer/custom-renderer.vue']
},
{
- 'demoId': 'news-async-colunm-render',
+ 'demoId': 'render-async-colunm-render',
'name': { 'zh-CN': '列异步数据渲染', 'en-US': 'Column Asynchronous Data Rendering' },
'desc': {
'zh-CN':
@@ -33,7 +33,7 @@ export default {
'en-US':
'
After the async attribute of the format-config column is set to true, the data data can be dynamically modified for automatic rendering. Generally, type is set to enum, and value and label can be used to configure the mapping of rendering cells.
\n'
},
- 'codeFiles': ['news/async-colunm-render.vue']
+ 'codeFiles': ['render/async-colunm-render.vue']
}
],
apis: [{ 'name': 'grid-renderer', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.cn.md
deleted file mode 100644
index 50af58c04..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.js b/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.js
deleted file mode 100644
index 044743ef0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
- column: '1',
- owner: '',
- demos: [
- {
- 'demoId': 'grid_Example-reverseRow',
- 'name': { 'zh-CN': 'Grid-表格行列反转', 'en-US': 'Grid-Inverting Rows and Columns in a Table' },
- 'desc': {
- 'zh-CN':
- '
需要在 grid 标签上配 :columns="tableColumn" :show-header="false"。点击“反转表格”按钮可查看效果，现阶段只能执行一次，执行多次会有问题。具体参考下面示例。
\n',
- 'en-US':
- "
You need to configure :columns="tableColumn" :show-header="false" on the grid 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.
\n"
- },
- 'codeFiles': ['grid_Example/reverseRow.vue']
- }
- ],
- apis: [{ 'name': 'grid-reverse-column-row', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
-}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.json.cn.md
deleted file mode 100644
index f65bd05ca..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.json.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.json.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-reverse-column-row.json.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js b/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js
index 2c0000c6b..c60f615f0 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js
@@ -3,17 +3,17 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'row-grouping',
+ 'demoId': 'group-row-grouping',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '
row-group 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。
\n',
'en-US':
'Row groups can be configured for the
row-group attribute. Columns with the same value are displayed in groups.
\n'
},
- 'codeFiles': ['row-grouping.vue']
+ 'codeFiles': ['group/row-grouping.vue']
},
{
- 'demoId': 'rowGroupRender',
+ 'demoId': 'group-row-group-render',
'name': { 'zh-CN': '自定义分组', 'en-US': 'Customized Group' },
'desc': {
'zh-CN':
@@ -21,7 +21,7 @@ export default {
'en-US':
'The
row-group configuration item render can be used to customize group content rendering, and closeable can be used to control whether group lines can be collapsed.
\n'
},
- 'codeFiles': ['rowGroupRender.vue']
+ 'codeFiles': ['group/row-group-render.vue']
}
],
apis: [{ 'name': 'grid-row-grouping', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-serial-column.js b/examples/sites/demos/pc/app/grid/webdoc/grid-serial-column.js
index 574f05c16..a15971329 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-serial-column.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-serial-column.js
@@ -3,17 +3,17 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-default-serial-column',
+ 'demoId': 'serial-column-default-serial-column',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '
表格列属性设置 type="index" 显示序号列。
\n',
'en-US':
'
Table column attribute setting type="index" Display sequence number column.
\n'
},
- 'codeFiles': ['tiny-first-menu/default-serial-column.vue']
+ 'codeFiles': ['serial-column/default-serial-column.vue']
},
{
- 'demoId': 'tiny-first-menu-custom-serial-column',
+ 'demoId': 'serial-column-custom-serial-column',
'name': { 'zh-CN': '自定义序号规则', 'en-US': 'User-defined sequence number rule' },
'desc': {
'zh-CN':
@@ -21,10 +21,10 @@ export default {
'en-US':
'
The table column attribute sets type="index" to display the sequence number column. The index-method method sets the user-defined sequence number rule.
\n'
},
- 'codeFiles': ['tiny-first-menu/custom-serial-column.vue']
+ 'codeFiles': ['serial-column/custom-serial-column.vue']
},
{
- 'demoId': 'tiny-first-menu-start-index',
+ 'demoId': 'serial-column-start-index',
'name': { 'zh-CN': '自定义序号列的起始值', 'en-US': 'Start value of the user-defined sequence number column' },
'desc': {
'zh-CN':
@@ -32,7 +32,7 @@ export default {
'en-US':
'
Set the table column attribute type="index" to display the sequence number column, and start-index to set the start value of the customized sequence number column.
\n'
},
- 'codeFiles': ['tiny-first-menu/start-index.vue']
+ 'codeFiles': ['serial-column/start-index.vue']
}
],
apis: [{ 'name': 'grid-serial-column', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-sort.js b/examples/sites/demos/pc/app/grid/webdoc/grid-sort.js
index d8d4357db..3385b1d40 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-sort.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-sort.js
@@ -12,16 +12,6 @@ export default {
},
'codeFiles': ['sort/default-sort.vue']
},
- {
- 'demoId': 'tiny-first-menu-row-id',
- 'name': { 'zh-CN': '唯一主键', 'en-US': 'Unique Primary Key' },
- 'desc': {
- 'zh-CN': '
通过表格设置 row-id 自定义行数据唯一主键的字段名。该属性的默认值为 _RID
\n',
- 'en-US':
- '
Set the row-id field name of the unique primary key of user-defined row data in a table. The default value of this property is _XID
\n'
- },
- 'codeFiles': ['tiny-first-menu/row-id.vue']
- },
{
'demoId': 'sort-combinations-sort',
'name': { 'zh-CN': '多字段组合排序', 'en-US': 'Multi-field sorting' },
@@ -45,7 +35,7 @@ export default {
'codeFiles': ['sort/custom-sort.vue']
},
{
- 'demoId': 'methods-sort',
+ 'demoId': 'sort-sort',
'name': { 'zh-CN': '手动排序', 'en-US': 'Manual Sorting' },
'desc': {
'zh-CN':
@@ -53,7 +43,7 @@ export default {
'en-US':
'
You can use the sort(field, order) method to manually sort tables. If order is empty, the sorting is automatically switched.
\n'
},
- 'codeFiles': ['methods/sort.vue']
+ 'codeFiles': ['sort/sort.vue']
},
{
'demoId': 'sort-server-sort',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-span.js b/examples/sites/demos/pc/app/grid/webdoc/grid-span.js
index 4b297387e..064b2da3a 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-span.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-span.js
@@ -3,7 +3,7 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'span-row-span-row-span-easy',
+ 'demoId': 'span-row-span-easy',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN':
@@ -11,16 +11,16 @@ export default {
'en-US':
'
Set the built-in row combination rule through the table column attribute row-span. This attribute applies only to common tables and does not apply to nested tree tables.
\n'
},
- 'codeFiles': ['span/row-span/row-span-easy.vue']
+ 'codeFiles': ['span/row-span-easy.vue']
},
{
- 'demoId': 'span-row-span-row-span',
+ 'demoId': 'span-row-span',
'name': { 'zh-CN': '自定义合并规则', 'en-US': 'Custom Combination Rule' },
'desc': {
'zh-CN': '
通过表格列属性 span-method 设置自定义合并规则。
\n',
'en-US': '
Set a custom combination rule through the table column attribute span-method.
\n'
},
- 'codeFiles': ['span/row-span/row-span.vue']
+ 'codeFiles': ['span/row-span.vue']
},
{
'demoId': 'span-column-span',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-summary.cn.md
deleted file mode 100644
index 50af58c04..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-summary.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.js b/examples/sites/demos/pc/app/grid/webdoc/grid-summary.js
deleted file mode 100644
index 09af43d07..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default {
- column: '1',
- owner: '',
- demos: [
- {
- 'demoId': 'summary-custom-summary',
- 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
- 'desc': {
- 'zh-CN': '
通过 footer-method 和 show-footer 配置自定义统计。
\n',
- 'en-US':
- '
Configure custom statistics through footer-method and show-footer.
\n'
- },
- 'codeFiles': ['summary/custom-summary.vue']
- },
- {
- 'demoId': 'summary-configuration-summary',
- 'name': { 'zh-CN': '设置配置式的统计', 'en-US': 'Set Profile Statistics' },
- 'desc': {
- 'zh-CN': '
通过 summary-config 设置配置式的统计。
\n',
- 'en-US': '
Set the profile statistics using summary-config.
\n'
- },
- 'codeFiles': ['summary/configuration-summary.vue']
- }
- ],
- apis: [{ 'name': 'grid-summary', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
-}
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.json.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-summary.json.cn.md
deleted file mode 100644
index f65bd05ca..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.json.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.json.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-summary.json.en.md
deleted file mode 100644
index f01c63ec0..000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-summary.json.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-
Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js b/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js
index bed706811..ecb498189 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js
+++ b/examples/sites/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':
'
Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar in slot mode and set the toolbar component attribute slot="toolbar" . \n2. Set the toolbar component attribute buttons and configure the button group. \n3. Table event setting: The @toolbar-button-click obtains the buttons event on the toolbar. Users can customize the service logic for adding, deleting, and modifying operations. To mark a new line in the
\n
state, set markInsert in edit-config to true
\n
\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-clearData',
'name': { 'zh-CN': '清空数据', 'en-US': 'Clear Data' },
'desc': {
'zh-CN':
@@ -33,7 +33,7 @@ export default {
'en-US':
'
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.
\n'
},
- 'codeFiles': ['tiny-first-menu/clearData.vue']
+ 'codeFiles': ['toolbar/clearData.vue']
},
{
'demoId': 'toolbar-insert-remove-rows',
@@ -50,7 +50,7 @@ export default {
'codeFiles': ['toolbar/insert-remove-rows.vue']
},
{
- 'demoId': 'tiny-first-menu-save-data',
+ 'demoId': 'toolbar-save-data',
'name': { 'zh-CN': '服务端数据保存和删除方法', 'en-US': 'Saving and Deleting Server Data' },
'desc': {
'zh-CN':
@@ -58,10 +58,10 @@ export default {
'en-US':
'
Use the table attribute save-data to save server data. \n Use the table attribute delete-data to delete server data.
\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,10 +69,10 @@ export default {
'en-US':
'
Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar in slot mode and set the toolbar component attribute slot="toolbar" . \n2. Set the toolbar component attribute buttons and configure the button group. \n3. Set the table event @toolbar-button-click to obtain the buttons event on the toolbar. You can customize the service logic for copying rows. The
\n
\nsize 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.
\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':
@@ -80,10 +80,10 @@ export default {
'en-US':
"
Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar in slot mode and set the toolbar component attribute slot="toolbar" . \n2. Set the toolbar component attribute refresh to enable the table refresh function.
\n
\n- Setting Toolbar Properties
loadingEnable/Disable Loading. \n handleFetch('reload') \n
\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':
'
Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar in slot mode and set the toolbar component attribute slot="toolbar" . \n2. Set the toolbar component attribute full-screen to enable the full-screen function.
\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':
'
Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar in slot mode and set the toolbar component slot #toolbar. \n2. Customize content through the slot #buttons of the toolbar component.
\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':
'
通过 v-bind 绑定一个对象来实现配置式。在绑定的对象中 toolbar 字段用于工具栏配置，可配合 events 字段对工具栏中按钮进行 toolbarButtonClick 事件配置。另外，pager 字段用于分页配置，fetchData 字段用于请求服务。
\n',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-tree-grid.js b/examples/sites/demos/pc/app/grid/webdoc/grid-tree-grid.js
index c2b2fdf0b..e2c858c0b 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-tree-grid.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-tree-grid.js
@@ -38,17 +38,17 @@ export default {
'codeFiles': ['tree-table/tree-grid-operation-column.vue']
},
{
- 'demoId': 'methods-set-all-tree-expansion',
+ 'demoId': 'tree-table-set-all-tree-expansion',
'name': { 'zh-CN': '手动展开所有树节点', 'en-US': 'Manually expand all tree nodes' },
'desc': {
'zh-CN': '
setAllTreeExpansion(checked) 可设置所有树节点的展开与否。
\n',
'en-US':
'
setAllTreeExpansion(checked) can be used to set whether all tree nodes are expanded or not.
\n'
},
- 'codeFiles': ['methods/set-all-tree-expansion.vue']
+ 'codeFiles': ['tree-table/set-all-tree-expansion.vue']
},
{
- 'demoId': 'methods-set-tree-expansion',
+ 'demoId': 'tree-table-set-tree-expansion',
'name': { 'zh-CN': '手动展开指定树节点', 'en-US': 'Manually expand a specified tree node' },
'desc': {
'zh-CN':
@@ -56,16 +56,16 @@ export default {
'en-US':
'You can set
setTreeExpansion(rows, checked) to expand the specified tree node. The second parameter specifies whether to expand the row.
\n'
},
- 'codeFiles': ['methods/set-tree-expansion.vue']
+ 'codeFiles': ['tree-table/set-tree-expansion.vue']
},
{
- 'demoId': 'methods-toggle-tree-expansion',
+ 'demoId': 'tree-table-toggle-tree-expansion',
'name': { 'zh-CN': '手动切换展开树形节点', 'en-US': 'Manually switch and expand tree nodes' },
'desc': {
'zh-CN': '
toggleTreeExpansion(row) 可设置切换展开树形节点。
\n',
'en-US': 'The
toggleTreeExpansion(row) can be set to switch to expand the tree node.
\n'
},
- 'codeFiles': ['methods/toggle-tree-expansion.vue']
+ 'codeFiles': ['tree-table/toggle-tree-expansion.vue']
},
{
'demoId': 'tree-table-tree-grid-fixed-column',
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-validation.js b/examples/sites/demos/pc/app/grid/webdoc/grid-validation.js
index 0a83921d9..567482030 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-validation.js
+++ b/examples/sites/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,10 +11,10 @@ export default {
'en-US':
'The
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.
\n'
},
- 'codeFiles': ['grid_Example/gridValid/editing-validation.vue']
+ 'codeFiles': ['validation/editing-validation.vue']
},
{
- 'demoId': 'grid_Example-gridValid-editing-isvalidalways-validation',
+ 'demoId': 'validation-editing-isvalidalways-validation',
'name': { 'zh-CN': '隐藏列编辑时校验', 'en-US': 'Verify hidden columns during editing' },
'desc': {
'zh-CN':
@@ -22,10 +22,10 @@ export default {
'en-US':
'
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.
\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,10 +33,10 @@ export default {
'en-US':
'
During customized validation, the validator method rule parameter can obtain the current row and column information. The verification logic of data association can be implemented based on service requirements.
\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': '自定义组件与插槽编辑器校验',
'en-US': 'Verify the customized component with the slot editor'
@@ -47,10 +47,10 @@ export default {
'en-US':
'
When using a custom component, the component needs to implement the v-model function. If you want to verify the slot in real time, you need to manually trigger the verification method of the component.
\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
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.
\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
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.
\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':
'
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.
\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':
'
The default error message is displayed on body. You can set appendTobody in tooltip-config to false to solve the problem that the tip position is incorrect during page scrolling. Set the placement property to adjust the default display direction. For details about the tooltip-config configuration, see the tooltip component
\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':
'
表格默认错误提示显示在 body 上， 可以通过设置 tooltip-config 的 appendTobody 设置为 false 来解决页面滚动时tip位置错误的问题。设置 placement 属性调整默认显示方向。tooltip-config 的配置可参参考 tooltip 组件
\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':
'
通过表格属性 editRules 可以配置表格的编辑规则，如果指定某一字段的 required 为 true，就会在表头显示必填星号。如果想要隐藏掉必填星号，可以通过表格属性 validConfig 配置一个方法 asteriskMethod 来控制，返回 false 则隐藏。参考示例：
\n',
'en-US': ''
},
- 'codeFiles': ['grid_Example/gridValid/asterisk-method.vue']
+ 'codeFiles': ['validation/asterisk-method.vue']
}
],
apis: [{ 'name': 'grid-validation', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-width-height.js b/examples/sites/demos/pc/app/grid/webdoc/grid-width-height.js
index 6474036db..e0be172f3 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-width-height.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-width-height.js
@@ -3,26 +3,26 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'tiny-first-menu-resize-column-width',
+ 'demoId': 'size-resize-column-width',
'name': { 'zh-CN': '开启列宽拖拽', 'en-US': 'Enable column width dragging' },
'desc': {
'zh-CN': '
列宽默认开启，如需禁用需要设置resizable为false
\n',
'en-US':
'
Column width is enabled by default. To disable this function, set resizable to false
\n'
},
- 'codeFiles': ['tiny-first-menu/resize-column-width.vue']
+ 'codeFiles': ['size/resize-column-width.vue']
},
{
- 'demoId': 'tiny-first-menu-fixed-column-width',
+ 'demoId': 'size-fixed-column-width',
'name': { 'zh-CN': '表格列属性设置宽度', 'en-US': 'Table column attribute width' },
'desc': {
'zh-CN': '
表格列属性设置 width 固定宽度，支持数值和百分比。
\n',
'en-US': '
The fixed width of the table column attribute is set. Values and percentages are supported.
\n'
},
- 'codeFiles': ['tiny-first-menu/fixed-column-width.vue']
+ 'codeFiles': ['size/fixed-column-width.vue']
},
{
- 'demoId': 'tiny-first-menu-adaptive-column-width',
+ 'demoId': 'size-adaptive-column-width',
'name': { 'zh-CN': '列宽自适应撑开', 'en-US': 'Adaptive expansion of column width' },
'desc': {
'zh-CN':
@@ -30,31 +30,31 @@ export default {
'en-US':
'
The table attribute is set to automatically expand fit. The default value is true, and adaptive expansion is enabled. If the value is false, the column width must be set. Otherwise, the table width is expanded by the cell content.
\n'
},
- 'codeFiles': ['tiny-first-menu/adaptive-column-width.vue']
+ 'codeFiles': ['size/adaptive-column-width.vue']
},
{
- 'demoId': 'tiny-first-menu-adaptive-un-column-width',
+ 'demoId': 'size-adaptive-un-column-width',
'name': { 'zh-CN': '列宽不自适应撑开', 'en-US': 'The column width is not adaptively extended' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/adaptive-un-column-width.vue']
+ 'codeFiles': ['size/adaptive-un-column-width.vue']
},
{
- 'demoId': 'tiny-first-menu-fixed-grid-height',
+ 'demoId': 'size-fixed-grid-height',
'name': { 'zh-CN': '表格属性设置高度', 'en-US': 'Table Attribute Setting Height' },
'desc': {
'zh-CN': '
表格属性设置 height 固定表格高度。
\n',
'en-US': '
Table attribute setting height Fixed table height.
\n'
},
- 'codeFiles': ['tiny-first-menu/fixed-grid-height.vue']
+ 'codeFiles': ['size/fixed-grid-height.vue']
},
{
- 'demoId': 'tiny-first-menu-adaptive-grid-off-width-height',
+ 'demoId': 'size-adaptive-grid-off-width-height',
'name': { 'zh-CN': '关闭响应式表格宽高', 'en-US': 'Disable responsive table width and height' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['tiny-first-menu/adaptive-grid-off-width-height.vue']
+ 'codeFiles': ['size/adaptive-grid-off-width-height.vue']
},
{
- 'demoId': 'news-auto-height',
+ 'demoId': 'size-auto-height',
'name': { 'zh-CN': '开启响应式表格宽高', 'en-US': 'Enable responsive table width and height' },
'desc': {
'zh-CN':
@@ -62,39 +62,39 @@ export default {
'en-US':
'
Table property setting autoResize property enabling responsive table width and height, set height heigh to auto to automatically follow the height of the parent container.
\n'
},
- 'codeFiles': ['news/auto-height.vue']
+ 'codeFiles': ['size/auto-height.vue']
},
{
- 'demoId': 'news-intersection-observer',
+ 'demoId': 'size-intersection-observer',
'name': { 'zh-CN': '同时创建多个隐藏的自动高度表格', 'en-US': 'Set the minimum height of minHeight' },
'desc': {
'zh-CN':
'
使用表格属性 `intersectionOption` 可设置相交检测配置，具体配置参考 IntersectionObserver API。\n设置 `intersectionOption.disabled` 为 `true` 可关闭表格的相交检测。\n通过事件 `visible-change` 可获取表格的显示隐藏状态，参考示例。
\n',
'en-US': '
Set minHeight to the minimum height and maxHeight to the maximum height.
\n'
},
- 'codeFiles': ['news/intersection-observer.vue']
+ 'codeFiles': ['size/intersection-observer.vue']
},
{
- 'demoId': 'tiny-first-menu-min-grid-height',
+ 'demoId': 'size-min-grid-height',
'name': { 'zh-CN': '设置 minHeight 最小高度', 'en-US': 'Set the maximum height of maxHeight' },
'desc': {
'zh-CN': '
表格属性设置 minHeight 限制最小高度，maxHeight 限制最大高度。
\n',
'en-US': 'For details, see the following example.'
},
- 'codeFiles': ['tiny-first-menu/min-grid-height.vue']
+ 'codeFiles': ['size/min-grid-height.vue']
},
{
- 'demoId': 'tiny-first-menu-max-min-grid-height',
+ 'demoId': 'size-max-min-grid-height',
'name': { 'zh-CN': '设置 maxHeight 最大高度', 'en-US': 'Set the overall column width' },
'desc': {
'zh-CN': '详细用法参考如下示例',
'en-US':
'
Set the minimum width of the overall column by using the column-min-width attribute. If this parameter is not set, the width of the column header span plus 36 (fixed width of the header) is used by default. \n
\n'
},
- 'codeFiles': ['tiny-first-menu/max-min-grid-height.vue']
+ 'codeFiles': ['size/max-min-grid-height.vue']
},
{
- 'demoId': 'tiny-first-menu-column-min-width',
+ 'demoId': 'size-column-min-width',
'name': { 'zh-CN': '设置总体列宽', 'en-US': 'Minimum width of this column' },
'desc': {
'zh-CN':
@@ -102,37 +102,46 @@ export default {
'en-US':
'
Minimum width of this column based on the table column attribute min-width; The automatically allocates the remaining space proportionally. \n
\n'
},
- 'codeFiles': ['tiny-first-menu/column-min-width.vue']
+ 'codeFiles': ['size/column-min-width.vue']
},
{
- 'demoId': 'tiny-first-menu-min-width',
+ 'demoId': 'size-min-width',
'name': { 'zh-CN': '本列最小宽度', 'en-US': 'Set the width of all columns' },
'desc': {
'zh-CN': '
通过表格列属性 min-width 本列最小宽度；会自动将剩余空间按比例分配。\n
\n',
'en-US':
'
Set the width of all columns through the column-width attribute. The default value is even distribution. \n
\n'
},
- 'codeFiles': ['tiny-first-menu/min-width.vue']
+ 'codeFiles': ['size/min-width.vue']
},
{
- 'demoId': 'tiny-first-menu-column-width',
+ 'demoId': 'size-column-width',
'name': { 'zh-CN': '设置所有列宽度', 'en-US': 'Recalculate Table' },
'desc': {
'zh-CN': '
通过属性 column-width 设置所有列宽度，默认值为均匀分配。\n
\n',
'en-US':
'
The recalculate() method can be used to recalculate the table when the width of the parent container changes.
\n'
},
- 'codeFiles': ['tiny-first-menu/column-width.vue']
+ 'codeFiles': ['size/column-width.vue']
},
{
- 'demoId': 'recalculate',
+ 'demoId': 'size-recalculate',
'name': { 'zh-CN': '重新计算表格', 'en-US': '' },
'desc': {
'zh-CN':
'
通过 recalculate() 方法可以重新计算表格，当父容器宽度变化时可通过该方法重新计算表格。
\n',
'en-US': ''
},
- 'codeFiles': ['recalculate.vue']
+ 'codeFiles': ['size/recalculate.vue']
+ },
+ {
+ 'demoId': 'size-grid-size',
+ 'name': { 'zh-CN': '尺寸', 'en-US': 'size' },
+ 'desc': {
+ 'zh-CN': '
表格设置 size 属性调整表格尺寸大小。
\n',
+ 'en-US': '
Table settingssize property adjusts the table size.
\n'
+ },
+ 'codeFiles': ['size/grid-size.vue']
}
],
apis: [{ 'name': 'grid-width-height', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid.js b/examples/sites/demos/pc/app/grid/webdoc/grid.js
index 608f52da2..14990e8cd 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid.js
@@ -3,16 +3,16 @@ export default {
owner: '',
demos: [
{
- 'demoId': 'basicUsage',
+ 'demoId': 'base-basicUsage',
'name': { 'zh-CN': '标签式', 'en-US': 'Label' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['basicUsage.vue']
+ 'codeFiles': ['base/basicUsage.vue']
},
{
- 'demoId': 'basicUsage-conf',
+ 'demoId': 'base-basicUsage-conf',
'name': { 'zh-CN': '配置式', 'en-US': 'Profile' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
- 'codeFiles': ['basicUsage-conf.vue']
+ 'codeFiles': ['base/basicUsage-conf.vue']
}
],
apis: [
@@ -130,7 +130,7 @@ export default {
'en-US':
'Add a class name to a cell. The class name can also be the Function({seq, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex})'
},
- 'demoId': 'grid-custom-style#custom-style-cell-style'
+ 'demoId': 'grid-custom-style#custom-style-body-style'
},
{
'name': 'column-key',
@@ -236,7 +236,7 @@ export default {
'en-US':
'Add the class name to the cell at the end of the table. The class name can also be the function Function({$rowIndex, column, columnIndex, $columnIndex})'
},
- 'demoId': 'grid-custom-style#custom-style-footer-style-footer-cell-style'
+ 'demoId': 'grid-custom-style#custom-style-footer-style'
},
{
'name': 'footer-method',
@@ -248,7 +248,7 @@ export default {
'en-US':
'Calculation method of table tail total Function({columns, data});params:{columns: all column configuration data: all table data}'
},
- 'demoId': 'grid-summary#summary-custom-summary'
+ 'demoId': 'grid-footer#footer-footer-summation-empty'
},
{
'name': 'footer-row-class-name',
@@ -260,7 +260,7 @@ export default {
'en-US':
'Add className to the row at the end of the table. The className can also be the function Function({$rowIndex}). Use footer-cell-class-name and footer-row-class-name to set the cell and row styles at the end of the table params:{$rowIndex: row label}'
},
- 'demoId': 'grid-custom-style#custom-style-footer-style-footer-cell-style'
+ 'demoId': 'grid-custom-style#custom-style-footer-style'
},
{
'name': 'footer-span-method',
@@ -295,7 +295,7 @@ export default {
'en-US':
'Add a class name to the cell in the table header. The class name can also be the function Function({$rowIndex, column, columnIndex, $columnIndex}). params{$rowIndex: row label, column: column data, columnIndex: column subscript, $columnIndex: column subscript}'
},
- 'demoId': 'grid-custom-style#custom-style-header-style-header-cell-style'
+ 'demoId': 'grid-custom-style#custom-style-header-style'
},
{
'name': 'header-row-class-name',
@@ -306,7 +306,7 @@ export default {
'en-US':
'Add className to the row in the table header. It can also be the function Function({$rowIndex});params: {$rowIndex: row label}'
},
- 'demoId': 'grid-custom-style#custom-style-header-style-header-cell-style'
+ 'demoId': 'grid-custom-style#custom-style-header-style'
},
{
'name': 'height',
@@ -456,7 +456,7 @@ export default {
'en-US':
'User-defined table row class name, which is used in the scenario where the row style of the table is customized. You can set the string class name directly or use the Function({seq, row, rowIndex, $rowIndex}) function to return the class name.'
},
- 'demoId': 'grid-custom-style#custom-style-row-style'
+ 'demoId': 'grid-custom-style#custom-style-body-style'
},
{
'name': 'row-id',
@@ -496,7 +496,7 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': { 'zh-CN': '是否显示表尾合计', 'en-US': 'Display the total at the end of the table' },
- 'demoId': 'grid-summary#summary-cus tom-summary'
+ 'demoId': 'grid-footer#footer-footer-summation-empty'
},
{
'name': 'show-header',
@@ -637,7 +637,7 @@ export default {
'en-US':
"Configuration item of the table statistics function; {fields:['Emp employees'], //Statistics field name\n fraction: 2, //Final digits reserved after decimal point\n truncate: false, //Whether to truncate. The default value is rounding up. The value is not truncated. \n text: ''//Statistics displayed text}"
},
- 'demoId': 'grid-summary#summary-configuration-summary'
+ 'demoId': 'grid-footer#footer-configuration-summary'
},
{
'name': 'sortable',
@@ -1997,7 +1997,7 @@ export default {
'en-US':
'Add a class name to a cell. The class name can also be the Function({seq, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex})'
},
- 'demoId': 'grid-custom-style#custom-style-cell-style'
+ 'demoId': 'grid-custom-style#custom-style-class-name'
},
{
'name': 'multi',
@@ -2088,7 +2088,7 @@ export default {
'en-US':
'This parameter is valid only for type=index. The user-defined index method is Function({row, rowIndex, column, columnIndex})'
},
- 'demoId': 'grid-serial-column#tiny-first-menu-custom-serial-column'
+ 'demoId': 'grid-serial-column#serial-column-custom-serial-column'
},
{
'name': 'min-width',
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index 5487c02e4..d64207636 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -119,48 +119,44 @@ export const cmpMenus = [
'labelEn': 'Table Components',
'key': 'cmp_table_components',
'children': [
- { 'nameCn': 'Grid表格基本用法', 'name': 'Basic Usage', 'key': 'grid' },
- { 'nameCn': '序号列', 'name': 'Ordinal column', 'key': 'grid-serial-column' },
- { 'nameCn': '操作列', 'name': 'Operation column', 'key': 'grid-operation-column' },
- { 'nameCn': '空数据', 'name': 'Empty data', 'key': 'grid-empty-data-tip' },
- { 'nameCn': '数据源', 'name': 'Data source', 'key': 'grid-data-source' },
- { 'nameCn': '大数据', 'name': 'Big data', 'key': 'grid-large-data' },
- { 'nameCn': '分页', 'name': 'Pagination', 'key': 'grid-pager' },
- { 'nameCn': '编辑', 'name': 'Editing', 'key': 'grid-edit' },
- { 'nameCn': '工具栏', 'name': 'Toolbar', 'key': 'grid-toolbar' },
- { 'nameCn': '加载中', 'name': 'Loading', 'key': 'grid-grid-loading-tip' },
- { 'nameCn': '尺寸', 'name': 'Size', 'key': 'grid-grid-size' },
- { 'nameCn': '宽高', 'name': 'Width and height', 'key': 'grid-width-height' },
- { 'nameCn': '边框', 'name': 'Borders', 'key': 'grid-grid-border' },
- { 'nameCn': '高亮', 'name': 'Highlighting', 'key': 'grid-highlight' },
- { 'nameCn': '斑马线条纹', 'name': 'Zebra Crossing Stripes', 'key': 'grid-grid-stripe' },
- { 'nameCn': '提示', 'name': 'Tip', 'key': 'grid-tip' },
- { 'nameCn': '对齐方式', 'name': 'Alignment', 'key': 'grid-align' },
- { 'nameCn': '表头', 'name': 'Table Header', 'key': 'grid-header' },
- { 'nameCn': '表尾', 'name': 'End of table', 'key': 'grid-footer' },
- { 'nameCn': '自定义样式', 'name': 'Custom Styles', 'key': 'grid-custom-style' },
- { 'nameCn': '排序', 'name': 'Sorting', 'key': 'grid-sort' },
- { 'nameCn': '筛选', 'name': 'Filtering', 'key': 'grid-filter' },
- { 'nameCn': '冻结', 'name': 'Freeze', 'key': 'grid-fixed' },
- { 'nameCn': '合并', 'name': 'Merges', 'key': 'grid-span' },
- { 'nameCn': '分组', 'name': 'Grouping', 'key': 'grid-row-grouping' },
- { 'nameCn': '统计', 'name': 'Statistic', 'key': 'grid-summary' },
- { 'nameCn': '拖拽', 'name': 'Drag and drop', 'key': 'grid-drag' },
- { 'nameCn': '数据级联', 'name': 'Data Cascading', 'key': 'grid-cascade' },
- { 'nameCn': '右键菜单', 'name': 'Right-click menu', 'key': 'grid-context-menu' },
- { 'nameCn': '编辑器', 'name': 'Editors', 'key': 'grid-editor' },
- { 'nameCn': '渲染器', 'name': 'Renderer', 'key': 'grid-renderer' },
- { 'nameCn': '表格校验', 'name': 'Check the table', 'key': 'grid-validation' },
- { 'nameCn': '事件', 'name': 'Events', 'key': 'grid-event' },
- { 'nameCn': '插槽', 'name': 'Slots', 'key': 'grid-slot' },
- { 'nameCn': '个性化', 'name': 'Personalized', 'key': 'grid-customized' },
- { 'nameCn': '树表', 'name': 'Tree table', 'key': 'grid-tree-grid' },
- { 'nameCn': '嵌套表格', 'name': 'Nested Tables', 'key': 'grid-nested-grid' },
- { 'nameCn': '导入导出', 'name': 'Import and export', 'key': 'grid-import-export' },
- { 'nameCn': '鼠标和键盘配置', 'name': 'Mouse and Keyboard Configuration', 'key': 'grid-keyboard' },
- { 'nameCn': '表格行列反转', 'name': 'Table row and column reversal', 'key': 'grid-reverse-column-row' },
- { 'nameCn': '动态生成列', 'name': 'Dynamically Generate Columns', 'key': 'grid-dynamically-columns' },
- { 'nameCn': '常见问题', 'name': 'Frequently Asked Questions', 'key': 'grid-faq' }
+ { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
+ { 'nameCn': '序号列', 'name': '', 'key': 'grid-serial-column' },
+ { 'nameCn': '操作列', 'name': '', 'key': 'grid-operation-column' },
+ { 'nameCn': '空数据', 'name': '', 'key': 'grid-empty-data-tip' },
+ { 'nameCn': '数据源', 'name': '', 'key': 'grid-data-source' },
+ { 'nameCn': '大数据', 'name': '', 'key': 'grid-large-data' },
+ { 'nameCn': '分页', 'name': '', 'key': 'grid-pager' },
+ { 'nameCn': '编辑', 'name': '', 'key': 'grid-edit' },
+ { 'nameCn': '工具栏', 'name': '', 'key': 'grid-toolbar' },
+ { 'nameCn': '加载中', 'name': '', 'key': 'grid-loading-tip' },
+ { 'nameCn': '宽高尺寸', 'name': '', 'key': 'grid-width-height' },
+ { 'nameCn': '外观设置', 'name': '', 'key': 'grid-appearance-settings' },
+ { 'nameCn': '高亮', 'name': '', 'key': 'grid-highlight' },
+ { 'nameCn': '提示', 'name': '', 'key': 'grid-tip' },
+ { 'nameCn': '对齐方式', 'name': '', 'key': 'grid-align' },
+ { 'nameCn': '表头', 'name': '', 'key': 'grid-header' },
+ { 'nameCn': '表尾', 'name': '', 'key': 'grid-footer' },
+ { 'nameCn': '自定义样式', 'name': '', 'key': 'grid-custom-style' },
+ { 'nameCn': '排序', 'name': '', 'key': 'grid-sort' },
+ { 'nameCn': '筛选', 'name': '', 'key': 'grid-filter' },
+ { 'nameCn': '冻结', 'name': '', 'key': 'grid-fixed' },
+ { 'nameCn': '合并', 'name': '', 'key': 'grid-span' },
+ { 'nameCn': '分组', 'name': '', 'key': 'grid-row-grouping' },
+ { 'nameCn': '拖拽', 'name': '', 'key': 'grid-drag' },
+ { 'nameCn': '数据级联', 'name': '', 'key': 'grid-cascade' },
+ { 'nameCn': '右键菜单', 'name': '', 'key': 'grid-context-menu' },
+ { 'nameCn': '编辑器', 'name': '', 'key': 'grid-editor' },
+ { 'nameCn': '渲染器', 'name': '', 'key': 'grid-renderer' },
+ { 'nameCn': '表格校验', 'name': '', 'key': 'grid-validation' },
+ { 'nameCn': '事件', 'name': '', 'key': 'grid-event' },
+ { 'nameCn': '插槽', 'name': '', 'key': 'grid-slot' },
+ { 'nameCn': '个性化', 'name': '', 'key': 'grid-custom' },
+ { 'nameCn': '树表', 'name': '', 'key': 'grid-tree-grid' },
+ { 'nameCn': '嵌套表格', 'name': '', 'key': 'grid-nested-grid' },
+ { 'nameCn': '导入导出', 'name': '', 'key': 'grid-import-export' },
+ { 'nameCn': '鼠标和键盘配置', 'name': '', 'key': 'grid-mouse-keyboard' },
+ { 'nameCn': '动态列及行列反转', 'name': '', 'key': 'grid-dynamically-columns' },
+ { 'nameCn': '常见问题', 'name': '', 'key': 'grid-faq' }
]
},
{