javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [table-column] add expand slot (#20750)

Browse Source 
* feat(components): [table-column] add `expand` slot

* fix(components): update

* Update packages/components/table/src/table-column/render-helper.ts

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>

* fix(docs): update

---------

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
This commit is contained in:
Meet you
2025-05-31 15:33:40 +08:00
committed by GitHub
parent 0a85cc0a10
commit b44a4a3acf
3 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -395,11 +395,12 @@ table/tooltip-formatter
### Table-column Slots
| Name | Description | Type |
| -------------------- | -------------------------------- | ---------------------------------------------------- |
| default | Custom content for table columns | ^[object]`{ row: any, column: any, $index: number }` |
| header | Custom content for table header | ^[object]`{ column: any, $index: number }` |
| filter-icon ^(2.7.8) | Custom content for filter icon | ^[object]`{ filterOpened: boolean }` |
| Name | Description | Type |
|----------------------|-----------------------------------| ---------------------------------------------------- |
| default | Custom content for table columns | ^[object]`{ row: any, column: any, $index: number }` |
| header | Custom content for table header | ^[object]`{ column: any, $index: number }` |
| filter-icon ^(2.7.8) | Custom content for filter icon | ^[object]`{ filterOpened: boolean }` |
| expand ^(2.10.0) | Custom content for expand columns | ^[object]`{ expanded: boolean }` |
## Type Declarations

13
packages/components/table/src/config.ts
View File

@@ -116,17 +116,20 @@ export const cellForced = {
return column.label || ''
},
renderCell<T>({
column,
row,
store,
expanded,
}: {
column: TableColumnCtx<T>
row: T
store: Store<T>
expanded: boolean
}) {
const { ns } = store
const classes = [ns.e('expand-icon')]
if (expanded) {
if (!column.renderExpand && expanded) {
classes.push(ns.em('expand-icon', 'expanded'))
}
const callback = function (e: Event) {
@@ -141,6 +144,14 @@ export const cellForced = {
},
{
default: () => {
if (column.renderExpand) {
return [
column.renderExpand({
expanded,
}),
]
}
return [
h(ElIcon, null, {
default: () => {

6
packages/components/table/src/table-column/render-helper.ts
View File

@@ -130,6 +130,12 @@ function useRender<T>(
}
}
if (slots.expand) {
column.renderExpand = (scope) => {
return renderSlot(slots, 'expand', scope)
}
}
let originRenderCell = column.renderCell
// TODO: 这里的实现调整
if (column.type === 'expand') {