test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 11:47:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [table] return type of function summary-method supports VNode (#16648)

Browse Source 
* fix(components): [table] return type of function summary-method

* fix: type
This commit is contained in:
一只前端汪 2024-04-25 17:58:14 +08:00 committed by GitHub
parent 6cad4d2aa7
commit f45f0b4368
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/en-US/component/table.md
View File

@ -193,7 +193,7 @@ table/tree-and-lazy
For table of numbers, you can add an extra row at the table footer displaying each column's sum.
:::demo You can add the summary row by setting `show-summary` to `true`. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using `sum-text`), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to `summary-method`, which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.
:::demo You can add the summary row by setting `show-summary` to `true`. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using `sum-text`), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to `summary-method`, which returns an array, and each element of the returned array will be displayed in the columns of the summary row, It can be a VNode or string. The second table of this example is a detailed demo.
table/summary
@ -262,7 +262,7 @@ table/table-layout
| tooltip-options ^(2.2.28) | the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes) | ^[object]`Pick<ElTooltipProps, 'effect' \| 'enterable' \| 'hideAfter' \| 'offset' \| 'placement' \| 'popperClass' \| 'popperOptions' \| 'showAfter' \| 'showArrow'>` | ^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }` |
| show-summary | whether to display a summary row | ^[boolean] | false |
| sum-text | displayed text for the first column of summary row | ^[string] | Sum |
| summary-method | custom summary method | ^[Function]`(data: { columns: any[], data: any[] }) => string[]` | — |
| summary-method | custom summary method | ^[Function]`(data: { columns: any[], data: any[] }) => (VNode \| string)[]` | — |
| span-method | method that returns rowspan and colspan | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => number[] \| { rowspan: number, colspan: number } \| void` | — |
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected | ^[boolean] | true |
| indent | horizontal indentation of tree data | ^[number] | 16 |

8
docs/examples/table/summary.vue
View File

@ -24,6 +24,8 @@
</template>
<script lang="ts" setup>
import { h } from 'vue'
import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'
interface Product {
@ -41,10 +43,12 @@ interface SummaryMethodProps<T = Product> {
const getSummaries = (param: SummaryMethodProps) => {
const { columns, data } = param
const sums: string[] = []
const sums: (string | VNode)[] = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = 'Total Cost'
sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
'Total Cost',
])
return
}
const values = data.map((item) => Number(item[column.property]))

2
packages/components/table/src/table/defaults.ts
View File

@ -55,7 +55,7 @@ type RenderExpanded<T> = ({
type SummaryMethod<T> = (data: {
columns: TableColumnCtx<T>[]
data: T[]
}) => string[]
}) => (string | VNode)[]
interface Table<T> extends ComponentInternalInstance {
$ready: boolean