From fc33d778b86ea4a8a3c36f8a97ea3c99dceea475 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 5 Jun 2024 16:46:40 +0800 Subject: [PATCH] docs: select highlight demo and tutorial --- .../demo/en/interaction/select-highlight.md | 116 +++++++++++ docs/assets/demo/en/interaction/select.md | 175 +++++++++-------- docs/assets/demo/menu.json | 7 + .../demo/zh/interaction/select-highlight.md | 116 +++++++++++ docs/assets/demo/zh/interaction/select.md | 180 +++++++++--------- docs/assets/guide/en/interaction/select.md | 57 +++++- docs/assets/guide/zh/interaction/select.md | 65 ++++++- docs/assets/option/en/common/theme-style.md | 18 +- docs/assets/option/en/common/theme.md | 16 +- docs/assets/option/zh/common/theme-style.md | 22 ++- docs/assets/option/zh/common/theme.md | 28 ++- packages/vtable/src/themes/theme.ts | 2 +- 12 files changed, 600 insertions(+), 202 deletions(-) create mode 100644 docs/assets/demo/en/interaction/select-highlight.md create mode 100644 docs/assets/demo/zh/interaction/select-highlight.md diff --git a/docs/assets/demo/en/interaction/select-highlight.md b/docs/assets/demo/en/interaction/select-highlight.md new file mode 100644 index 000000000..af6c6657c --- /dev/null +++ b/docs/assets/demo/en/interaction/select-highlight.md @@ -0,0 +1,116 @@ +--- +category: examples +group: Interaction +title: Select Highlight Effect +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/select-highlight.png +link: '../guide/interaction/select' +option: ListTable#select +--- + +# Select the cell row to highlight the effect + +Click on the cell, the entire row or column will be highlighted when the cell is selected. If more than one cell is selected, the highlight effect will disappear. + +The highlighted style can be configured in the style. Global configuration: `theme.selectionStyle`, or it can be configured separately for the header and body. For specific configuration methods, please refer to the tutorial. + +## Key Configurations + +- `select: { + highlightMode: 'cross' +}` + +## Code demo + +```javascript livedemo template=vtable +let tableInstance; +fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') + .then(res => res.json()) + .then(data => { + const columns = [ + { + field: 'Order ID', + title: 'Order ID', + width: 'auto' + }, + { + field: 'Customer ID', + title: 'Customer ID', + width: 'auto' + }, + { + field: 'Product Name', + title: 'Product Name', + width: 'auto' + }, + { + field: 'Category', + title: 'Category', + width: 'auto' + }, + { + field: 'Sub-Category', + title: 'Sub-Category', + width: 'auto' + }, + { + field: 'Region', + title: 'Region', + width: 'auto' + }, + { + field: 'City', + title: 'City', + width: 'auto' + }, + { + field: 'Order Date', + title: 'Order Date', + width: 'auto' + }, + { + field: 'Quantity', + title: 'Quantity', + width: 'auto' + }, + { + field: 'Sales', + title: 'Sales', + width: 'auto' + }, + { + field: 'Profit', + title: 'Profit', + width: 'auto' + } + ]; + + const option = { + records: data, + columns, + widthMode: 'standard', + keyboardOptions: { + selectAllOnCtrlA: true, + copySelected: true + }, + select: { + highlightMode: 'cross' + }, + theme: VTable.themes.ARCO.extends({ + selectionStyle: { + cellBgColor: 'rgba(130, 178, 245, 0.2)', + cellBorderLineWidth: 2, + inlineRowBgColor: 'rgb(160,207,245)', + inlineColumnBgColor: 'rgb(160,207,245)' + }, + headerStyle: { + select: { + inlineRowBgColor: 'rgb(0,207,245)', + inlineColumnBgColor: 'rgb(0,207,245)' + } + } + }) + }; + tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); + window['tableInstance'] = tableInstance; + }); +``` diff --git a/docs/assets/demo/en/interaction/select.md b/docs/assets/demo/en/interaction/select.md index 59d1624a0..0d05f721a 100644 --- a/docs/assets/demo/en/interaction/select.md +++ b/docs/assets/demo/en/interaction/select.md @@ -3,9 +3,8 @@ category: examples group: Interaction title: Select cell cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/select.png -order: 4-1 link: '../guide/interaction/select' -option: keyboardOptions.selectAllOnCtrlA +option: ListTable#keyboardOptions --- # Select cell @@ -20,96 +19,94 @@ Clicking on the header cell will select the entire row or column by default. If ## Key Configurations -* `keyboardOptions: { - selectAllOnCtrlA: true, - copySelected: true - }` - Enable the ctrl + A optional function and shortcut to copy the selected content. +- `keyboardOptions: { + selectAllOnCtrlA: true, + copySelected: true +}` + Enable the ctrl + A optional function and shortcut to copy the selected content. ## Code demo ```javascript livedemo template=vtable - -let tableInstance; - fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') - .then((res) => res.json()) - .then((data) => { - -const columns =[ - { - "field": "Order ID", - "title": "Order ID", - "width": "auto" - }, - { - "field": "Customer ID", - "title": "Customer ID", - "width": "auto" - }, - { - "field": "Product Name", - "title": "Product Name", - "width": "auto" - }, - { - "field": "Category", - "title": "Category", - "width": "auto" - }, - { - "field": "Sub-Category", - "title": "Sub-Category", - "width": "auto" - }, - { - "field": "Region", - "title": "Region", - "width": "auto" - }, - { - "field": "City", - "title": "City", - "width": "auto" - }, - { - "field": "Order Date", - "title": "Order Date", - "width": "auto" - }, - { - "field": "Quantity", - "title": "Quantity", - "width": "auto" - }, - { - "field": "Sales", - "title": "Sales", - "width": "auto" - }, - { - "field": "Profit", - "title": "Profit", - "width": "auto" - } -]; - -const option = { - records:data, - columns, - widthMode:'standard', - keyboardOptions: { - selectAllOnCtrlA: true, - copySelected: true - }, - theme:VTable.themes.ARCO.extends({ - selectionStyle:{ - cellBorderLineWidth: 2, - cellBorderColor: '#9900ff', - cellBgColor: 'rgba(153,0,255,0.2)', +let tableInstance; +fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') + .then(res => res.json()) + .then(data => { + const columns = [ + { + field: 'Order ID', + title: 'Order ID', + width: 'auto' + }, + { + field: 'Customer ID', + title: 'Customer ID', + width: 'auto' + }, + { + field: 'Product Name', + title: 'Product Name', + width: 'auto' + }, + { + field: 'Category', + title: 'Category', + width: 'auto' + }, + { + field: 'Sub-Category', + title: 'Sub-Category', + width: 'auto' + }, + { + field: 'Region', + title: 'Region', + width: 'auto' + }, + { + field: 'City', + title: 'City', + width: 'auto' + }, + { + field: 'Order Date', + title: 'Order Date', + width: 'auto' + }, + { + field: 'Quantity', + title: 'Quantity', + width: 'auto' + }, + { + field: 'Sales', + title: 'Sales', + width: 'auto' + }, + { + field: 'Profit', + title: 'Profit', + width: 'auto' } - }) -}; -tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); -window['tableInstance'] = tableInstance; - }) + ]; + + const option = { + records: data, + columns, + widthMode: 'standard', + keyboardOptions: { + selectAllOnCtrlA: true, + copySelected: true + }, + theme: VTable.themes.ARCO.extends({ + selectionStyle: { + cellBorderLineWidth: 2, + cellBorderColor: '#9900ff', + cellBgColor: 'rgba(153,0,255,0.2)' + } + }) + }; + tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); + window['tableInstance'] = tableInstance; + }); ``` diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json index 8e8781fea..f0bd83932 100644 --- a/docs/assets/demo/menu.json +++ b/docs/assets/demo/menu.json @@ -556,6 +556,13 @@ "option": "" } }, + { + "path": "select-highlight", + "title": { + "zh": "选中整行高亮", + "en": "Select Highlight" + } + }, { "path": "hover-inline-cross", "title": { diff --git a/docs/assets/demo/zh/interaction/select-highlight.md b/docs/assets/demo/zh/interaction/select-highlight.md new file mode 100644 index 000000000..498b96f99 --- /dev/null +++ b/docs/assets/demo/zh/interaction/select-highlight.md @@ -0,0 +1,116 @@ +--- +category: examples +group: Interaction +title: 选择单元格整行高亮 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/select-highlight.png +link: '../guide/interaction/select' +option: ListTable#select +--- + +# 选择单元格整行高亮效果 + +点击单元格，选中单元格的同时会高亮整行或者整列，如果非单个单元格被选中则高亮效果会消失。 + +高亮的样式可在样式中配置。全局配置：`theme.selectionStyle`中，也可以按表头及 body 分别配置，具体配置方式可查看教程。 + +## 关键配置 + +- `select: { + highlightMode: 'cross' +}` + +## 代码演示 + +```javascript livedemo template=vtable +let tableInstance; +fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') + .then(res => res.json()) + .then(data => { + const columns = [ + { + field: 'Order ID', + title: 'Order ID', + width: 'auto' + }, + { + field: 'Customer ID', + title: 'Customer ID', + width: 'auto' + }, + { + field: 'Product Name', + title: 'Product Name', + width: 'auto' + }, + { + field: 'Category', + title: 'Category', + width: 'auto' + }, + { + field: 'Sub-Category', + title: 'Sub-Category', + width: 'auto' + }, + { + field: 'Region', + title: 'Region', + width: 'auto' + }, + { + field: 'City', + title: 'City', + width: 'auto' + }, + { + field: 'Order Date', + title: 'Order Date', + width: 'auto' + }, + { + field: 'Quantity', + title: 'Quantity', + width: 'auto' + }, + { + field: 'Sales', + title: 'Sales', + width: 'auto' + }, + { + field: 'Profit', + title: 'Profit', + width: 'auto' + } + ]; + + const option = { + records: data, + columns, + widthMode: 'standard', + keyboardOptions: { + selectAllOnCtrlA: true, + copySelected: true + }, + select: { + highlightMode: 'cross' + }, + theme: VTable.themes.ARCO.extends({ + selectionStyle: { + cellBgColor: 'rgba(130, 178, 245, 0.2)', + cellBorderLineWidth: 2, + inlineRowBgColor: 'rgb(160,207,245)', + inlineColumnBgColor: 'rgb(160,207,245)' + }, + headerStyle: { + select: { + inlineRowBgColor: 'rgb(0,207,245)', + inlineColumnBgColor: 'rgb(0,207,245)' + } + } + }) + }; + tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); + window['tableInstance'] = tableInstance; + }); +``` diff --git a/docs/assets/demo/zh/interaction/select.md b/docs/assets/demo/zh/interaction/select.md index 92795543f..c47e1c106 100644 --- a/docs/assets/demo/zh/interaction/select.md +++ b/docs/assets/demo/zh/interaction/select.md @@ -3,114 +3,110 @@ category: examples group: Interaction title: 选择单元格 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/select.png -order: 4-1 link: '../guide/interaction/select' -option: keyboardOptions.selectAllOnCtrlA +option: ListTable#keyboardOptions --- # 选择单元格 点击单元格进行单选，拖拽进行刷选。 -按住ctrl或者shift进行多选。 +按住 ctrl 或者 shift 进行多选。 -开启快捷键selectAllOnCtrlA配置进行全选。 +开启快捷键 selectAllOnCtrlA 配置进行全选。 -点击表头单元格的行为默认会选中整行或者整列，如果只想选中当前单元格可以设置select.headerSelectMode为'cell'。 +点击表头单元格的行为默认会选中整行或者整列，如果只想选中当前单元格可以设置 select.headerSelectMode 为'cell'。 ## 关键配置 -- ` - keyboardOptions: { +- ` keyboardOptions: { selectAllOnCtrlA: true, copySelected: true - } -` -开启ctrl+A可选功能，及快捷键复制选中内容。 + }` + 开启 ctrl+A 可选功能，及快捷键复制选中内容。 + ## 代码演示 ```javascript livedemo template=vtable - -let tableInstance; - fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') - .then((res) => res.json()) - .then((data) => { - -const columns =[ - { - "field": "Order ID", - "title": "Order ID", - "width": "auto" - }, - { - "field": "Customer ID", - "title": "Customer ID", - "width": "auto" - }, - { - "field": "Product Name", - "title": "Product Name", - "width": "auto" - }, - { - "field": "Category", - "title": "Category", - "width": "auto" - }, - { - "field": "Sub-Category", - "title": "Sub-Category", - "width": "auto" - }, - { - "field": "Region", - "title": "Region", - "width": "auto" - }, - { - "field": "City", - "title": "City", - "width": "auto" - }, - { - "field": "Order Date", - "title": "Order Date", - "width": "auto" - }, - { - "field": "Quantity", - "title": "Quantity", - "width": "auto" - }, - { - "field": "Sales", - "title": "Sales", - "width": "auto" - }, - { - "field": "Profit", - "title": "Profit", - "width": "auto" - } -]; - -const option = { - records:data, - columns, - widthMode:'standard', - keyboardOptions: { - selectAllOnCtrlA: true, - copySelected: true - }, - theme:VTable.themes.ARCO.extends({ - selectionStyle:{ - cellBorderLineWidth: 2, - cellBorderColor: '#9900ff', - cellBgColor: 'rgba(153,0,255,0.2)', +let tableInstance; +fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') + .then(res => res.json()) + .then(data => { + const columns = [ + { + field: 'Order ID', + title: 'Order ID', + width: 'auto' + }, + { + field: 'Customer ID', + title: 'Customer ID', + width: 'auto' + }, + { + field: 'Product Name', + title: 'Product Name', + width: 'auto' + }, + { + field: 'Category', + title: 'Category', + width: 'auto' + }, + { + field: 'Sub-Category', + title: 'Sub-Category', + width: 'auto' + }, + { + field: 'Region', + title: 'Region', + width: 'auto' + }, + { + field: 'City', + title: 'City', + width: 'auto' + }, + { + field: 'Order Date', + title: 'Order Date', + width: 'auto' + }, + { + field: 'Quantity', + title: 'Quantity', + width: 'auto' + }, + { + field: 'Sales', + title: 'Sales', + width: 'auto' + }, + { + field: 'Profit', + title: 'Profit', + width: 'auto' } - }) -}; -tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option); -window['tableInstance'] = tableInstance; - }) + ]; + + const option = { + records: data, + columns, + widthMode: 'standard', + keyboardOptions: { + selectAllOnCtrlA: true, + copySelected: true + }, + theme: VTable.themes.ARCO.extends({ + selectionStyle: { + cellBorderLineWidth: 2, + cellBorderColor: '#9900ff', + cellBgColor: 'rgba(153,0,255,0.2)' + } + }) + }; + tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); + window['tableInstance'] = tableInstance; + }); ``` diff --git a/docs/assets/guide/en/interaction/select.md b/docs/assets/guide/en/interaction/select.md index 8a5ed330b..29601f2ee 100644 --- a/docs/assets/guide/en/interaction/select.md +++ b/docs/assets/guide/en/interaction/select.md @@ -9,6 +9,7 @@ When using VTable for data analytics, individual cells can be selected with a mo As shown above, after clicking on cell (2,3), the cell is selected. Clicking on the header cell will select the entire row or column by default. If you only want to select the current cell, you can set select.headerSelectMode to 'cell'. + ## Mouse box selection In addition to clicking on a single cell, VTable also supports mouse box selection, which can select multiple cells by dragging the mouse. This feature allows the user to select multiple cells at once (Hold down ctrl or shift to make multiple selections). By default, VTable has mouse box selection turned on. @@ -18,23 +19,29 @@ In addition to clicking on a single cell, VTable also supports mouse box selecti As shown in the image above, the user selects multiple cells by dragging the mouse. ## Call interface selection + A certain business scenario, such as linkage selection with other modules, is not a manual mouse-triggered selection. The selection can be completed with the help of the interface. + ### Single cell selection Usage is as follows: + ``` // Select cells in 4 columns and 5 rows tableInstance.selectCell(4,5); ``` + ### Cell range selected Call the interface selectCells, the usage is as follows: + ``` // Two ranges in the table: from column 1, row 2 to column 4, row 2 and from column 3, row 5 to column 7, row 8 tableInstance.selectCells([{start:{col:1,row:2},end:{col:4,row:2}},{start:{col:3,row:5},end:{col:7 ,row:8}}]); ``` ### Clear current selection + call api `clearSelected`. ## Select style @@ -59,6 +66,50 @@ const = new VTable.ListTable({ As shown in the image above, the background color of the selected cell is purple. +## Select and highlight the entire row and column + +Clicking a cell may require highlighting the entire row or column, which can be achieved through the following configuration: + +``` + select: { + highlightMode: 'cross' // can be configured as 'cross' or 'row' or 'column' + } +``` + +Note: If you select multiple cells, the highlight effect will disappear. + +The highlighting style can be configured in the style. + +Global configuration: in `theme.selectionStyle`, the specific configuration method is: + +``` +theme:{ + selectionStyle:{ + inlineRowBgColor: 'rgb(160,207,245)', + inlineColumnBgColor: 'rgb(160,207,245)' + } +} +``` + +You can also configure headerStyle and bodyStyle separately. The specific configuration method is: + +``` +theme:{ + headerStyle: { + select: { + inlineRowBgColor: 'rgb(0,207,245)', + inlineColumnBgColor: 'rgb(0,207,245)' + } + }, + bodyStyle: { + select: { + inlineRowBgColor: 'rgb(0,207,245)', + inlineColumnBgColor: 'rgb(0,207,245)' + } + } +} +``` + ## Choose to copy cell contents VTable provides a copy shortcut function, users can set `keyboardOptions.copySelected` for `true`, to enable the shortcut copy function: @@ -79,9 +130,13 @@ There is an event called `copy_data` in conjunction with copying content. This e When operating on table data, the user may want to shortcut all the contents of the table. The Open Select All function allows the user to select all the contents of the table at once by holding down the Ctrl key and pressing the A key. It should be noted that this function is turned off by default, and the Select All function is turned on with the following configuration: +``` keyboardOptions: { - selectAllOnCtrlA: false; + selectAllOnCtrlA?: boolean | SelectAllOnCtrlAOption; } +``` + +If you do not want to select the table header or row number column at the same time, you can configure it according to `SelectAllOnCtrlAOption`. ## Disable Select Interaction diff --git a/docs/assets/guide/zh/interaction/select.md b/docs/assets/guide/zh/interaction/select.md index 899b5619c..072ec4384 100644 --- a/docs/assets/guide/zh/interaction/select.md +++ b/docs/assets/guide/zh/interaction/select.md @@ -8,33 +8,40 @@ 如上图所示，点击单元格 (2, 3) 后，该单元格被选中。 -点击表头单元格的行为默认会选中整行或者整列，如果只想选中当前单元格可以设置select.headerSelectMode为'cell'。 +点击表头单元格的行为默认会选中整行或者整列，如果只想选中当前单元格可以设置 select.headerSelectMode 为'cell'。 + ## 鼠标框选 -除了点击单个单元格外，VTable 还支持鼠标框选，可以通过拖动鼠标选择多个单元格。此功能允许用户一次性选择并多个单元格(按住ctrl或者shift进行多选)。默认情况下，VTable 开启了鼠标框选功能。 +除了点击单个单元格外，VTable 还支持鼠标框选，可以通过拖动鼠标选择多个单元格。此功能允许用户一次性选择并多个单元格(按住 ctrl 或者 shift 进行多选)。默认情况下，VTable 开启了鼠标框选功能。 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/eb08aeafba39ab34c8a08c60f.png) 如上图所示，用户通过拖动鼠标选择了多个元格。 ## 调用接口选择 + 某项业务场景，如与其他模块联动选择，并不是手动鼠标触发选择，可以借助接口来完成选中。 + ### 单个单元格选中 用法如下： + ``` // 选中4列5行的单元格 tableInstance.selectCell(4,5); ``` + ### 单元格范围选中 -调用接口selectCells，用法如下： +调用接口 selectCells，用法如下： + ``` // 表格中的两个范围：从列1行2到列4行2 从列3行5到列7行8 tableInstance.selectCells([{start:{col:1,row:2},end:{col:4,row:2}},{start:{col:3,row:5},end:{col:7,row:8}}]); ``` ### 清除当前选中 + 调用接口`clearSelected` ## 选中样式 @@ -59,6 +66,50 @@ const = new VTable.ListTable({ 如上图所示，选中的单元格背景颜色为紫色。 +## 选中高亮整行整列 + +点击单元格，可能有高亮整行或者整列的需求，可以通过如下配置实现: + +``` +select: { + highlightMode: 'cross' // 可以配置为'cross' 或者 'row' 或者 'column' +} +``` + +注意：如果选中多个单元格高亮效果会消失。 + +高亮的样式可在样式中配置。 + +全局配置：`theme.selectionStyle`中，具体配置方式： + +``` +theme:{ + selectionStyle:{ + inlineRowBgColor: 'rgb(160,207,245)', + inlineColumnBgColor: 'rgb(160,207,245)' + } +} +``` + +也可以按表头 headerStyle 及 bodyStyle 分别配置，具体配置方式： + +``` +theme:{ + headerStyle: { + select: { + inlineRowBgColor: 'rgb(0,207,245)', + inlineColumnBgColor: 'rgb(0,207,245)' + } + }, + bodyStyle: { + select: { + inlineRowBgColor: 'rgb(0,207,245)', + inlineColumnBgColor: 'rgb(0,207,245)' + } + } +} +``` + ## 选择复制单元格内容 VTable 提供了复制快捷键功能，用户可以通过设置 `keyboardOptions.copySelected` 为 `true`，来开启快捷键复制功能： @@ -79,9 +130,13 @@ const table = new VTable.ListTable({ 在对表格数据进行操作时，用户可能希望通过快捷键全选表格中的所有内容。开启全选功能允许用户通过按住 Ctrl 键并按下 A 键，一次性选择表格中的所有内容。需要注意的是，默认是关闭该功能的，使用以下配置开启全选功能： +``` keyboardOptions: { - selectAllOnCtrlA: false; + selectAllOnCtrlA?: boolean | SelectAllOnCtrlAOption; } +``` + +如果不想同时选中表头或者行号列 可以按照`SelectAllOnCtrlAOption`进行配置。 ## 禁止选择交互 @@ -109,6 +164,6 @@ const table = new VTable.ListTable({ 禁止选择交互后，用户无法通过点击或拖动鼠标来选择单元格。 -再有特殊需求不希望用户能够选择表格中的某些列。针对这种需求，VTable 提供了一个在列上的配置项column.disableSelect及disableHeaderSelect，允许我们禁止某一列的选择【透视表无此配置】。 +再有特殊需求不希望用户能够选择表格中的某些列。针对这种需求，VTable 提供了一个在列上的配置项 column.disableSelect 及 disableHeaderSelect，允许我们禁止某一列的选择【透视表无此配置】。 至此，我们已经介绍了 VTable 的选择单元格功能，包括鼠标点击选择、鼠标框选、禁止选择交互、选中样式以及选择复制单元格内容。通过掌握这些功能，您可以更便捷地在 VTable 中进行数据分析与处理。 diff --git a/docs/assets/option/en/common/theme-style.md b/docs/assets/option/en/common/theme-style.md index f3307c0d6..ed4c9eac5 100644 --- a/docs/assets/option/en/common/theme-style.md +++ b/docs/assets/option/en/common/theme-style.md @@ -26,10 +26,26 @@ Background color of the entire column in the interaction prefix = ${prefix} ) }} +#${prefix} select(Object) + +Select highlight style + +##${prefix} inlineRowBgColor(ColorPropertyDefine) +The highlight color of the entire row when selected +{{ use: common-color( +prefix = ${prefix} +) }} + +##${prefix} inlineColumnBgColor(ColorPropertyDefine) +The highlight color of the entire column when selected +{{ use: common-color( +prefix = ${prefix} +) }} + #${prefix} frameStyle(FrameStyle) Outer border style of the current section, such as the overall outer border of the body or the overall outer border of the header {{ use: common-frame-style( prefix = '#'+${prefix} - ) }} \ No newline at end of file + ) }} diff --git a/docs/assets/option/en/common/theme.md b/docs/assets/option/en/common/theme.md index 9cf8f8ed1..264f59bf3 100644 --- a/docs/assets/option/en/common/theme.md +++ b/docs/assets/option/en/common/theme.md @@ -1,13 +1,15 @@ {{ target: common-theme }} Table theme, which has built-in theme names DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY. The configuration can be made using built-in types or directly with string names: + - `VTable.themes.DEFAULT` - `VTable.themes.ARCO;` - `VTable.themes.BRIGHT` - `VTable.themes.DARK` - `VTable.themes.SIMPLIFY` - + or + - `'default'` - `'arco'` - `'bright'` @@ -142,4 +144,14 @@ Selection box border color ##${prefix} cellBorderLineWidth(number) Selection box border thickness -#${prefix} Example: [TODO](xxxx) \ No newline at end of file +##${prefix} inlineRowBgColor(ColorPropertyDefine) +The highlight color of the entire row when selected +{{ use: common-color( +prefix = ${prefix} +) }} + +##${prefix} inlineColumnBgColor(ColorPropertyDefine) +The highlight color of the entire column when selected +{{ use: common-color( +prefix = ${prefix} +) }} diff --git a/docs/assets/option/zh/common/theme-style.md b/docs/assets/option/zh/common/theme-style.md index 0c5d007a3..1e39eb896 100644 --- a/docs/assets/option/zh/common/theme-style.md +++ b/docs/assets/option/zh/common/theme-style.md @@ -6,7 +6,7 @@ #${prefix} hover(Object) -hover单元格时的效果 +hover 单元格时的效果 ##${prefix} cellBgColor(ColorPropertyDefine) 交互所在单元格的背景颜色 @@ -26,10 +26,26 @@ hover单元格时的效果 prefix = ${prefix} ) }} +#${prefix} select(Object) + +选择高亮样式 + +##${prefix} inlineRowBgColor(ColorPropertyDefine) +选中时整行高亮颜色 +{{ use: common-color( + prefix = ${prefix} + ) }} + +##${prefix} inlineColumnBgColor(ColorPropertyDefine) +选中时整列高亮颜色 +{{ use: common-color( + prefix = ${prefix} + ) }} + #${prefix} frameStyle(FrameStyle) -当前部分的外边框样式，如body整体外边框，或者表头整体外边框 +当前部分的外边框样式，如 body 整体外边框，或者表头整体外边框 {{ use: common-frame-style( prefix = '#'+${prefix} - ) }} \ No newline at end of file + ) }} diff --git a/docs/assets/option/zh/common/theme.md b/docs/assets/option/zh/common/theme.md index a5235bade..619c375e3 100644 --- a/docs/assets/option/zh/common/theme.md +++ b/docs/assets/option/zh/common/theme.md @@ -1,20 +1,22 @@ {{ target: common-theme }} -表格主题，其中内置主题名称有DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY，具体配置方式可用内置类型或者直接使用字符串名称配置： +表格主题，其中内置主题名称有 DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY，具体配置方式可用内置类型或者直接使用字符串名称配置： + - `VTable.themes.DEFAULT` - `VTable.themes.ARCO;` - `VTable.themes.BRIGHT` - `VTable.themes.DARK` - `VTable.themes.SIMPLIFY` - + or + - `'default'` - `'arco'` - `'bright'` - `'dark'` - `'simplify'` -同时可以基于内置主题进行扩展，例如想基于ARCO主题改变字体: +同时可以基于内置主题进行扩展，例如想基于 ARCO 主题改变字体: ``` VTable.themes.ARCO.extend({ @@ -52,14 +54,14 @@ VTable.themes.ARCO.extend({ ``` #${prefix} underlayBackgroundColor(string) -表格绘制范围外的canvas上填充的颜色 +表格绘制范围外的 canvas 上填充的颜色 #${prefix} cellInnerBorder(boolean) -单元格是否绘制内边框，如果为true，边界单元格靠近边界的边框会被隐藏 +单元格是否绘制内边框，如果为 true，边界单元格靠近边界的边框会被隐藏 #${prefix} bodyStyle(Object) -body单元格的样式配置 +body 单元格的样式配置 {{ use: common-theme-style( prefix = '#' + ${prefix}, @@ -91,7 +93,7 @@ body单元格的样式配置 #${prefix} defaultStyle(Object) -公共样式，如果headerStyle，rowHeaderStyle, defaultStyle都没有配置的项，则使用这个里面的配置项 +公共样式，如果 headerStyle，rowHeaderStyle, defaultStyle 都没有配置的项，则使用这个里面的配置项 {{ use: common-theme-style( prefix = '#' + ${prefix}, @@ -142,4 +144,14 @@ body单元格的样式配置 ##${prefix} cellBorderLineWidth(number) 选择框边框粗细 -#${prefix} 示例：[TODO](xxxx) \ No newline at end of file +##${prefix} inlineRowBgColor(ColorPropertyDefine) +选中时整行高亮颜色 +{{ use: common-color( + prefix = ${prefix} + ) }} + +##${prefix} inlineColumnBgColor(ColorPropertyDefine) +选中时整列高亮颜色 +{{ use: common-color( + prefix = ${prefix} + ) }} diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts index 2b19061c2..cf9447610 100644 --- a/packages/vtable/src/themes/theme.ts +++ b/packages/vtable/src/themes/theme.ts @@ -723,7 +723,7 @@ export class TableTheme implements ITableThemeDefine { return hasThemeProperty(obj, names) || hasThemeProperty(superTheme, names); } extends(obj: PartialTableThemeDefine): TableTheme { - return new TableTheme(obj, this); + return new TableTheme(obj, this.internalTheme.superTheme || this.internalTheme.obj); } private getStyle(style: ThemeStyle) { const that = this;