diff --git a/packages/ali-react-table/src/pipeline/features/rowDetail.tsx b/packages/ali-react-table/src/pipeline/features/rowDetail.tsx
index b86ae1e89..d1aef5ea5 100644
--- a/packages/ali-react-table/src/pipeline/features/rowDetail.tsx
+++ b/packages/ali-react-table/src/pipeline/features/rowDetail.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react'
import { ExpansionCell, icons, InlineFlexCell } from '../../common-views'
import { ArtColumn } from '../../interfaces'
import { internals } from '../../internals'
-import { collectNodes, mergeCellProps } from '../../utils'
+import { collectNodes, mergeCellProps, upDataFirstCol } from '../../utils'
import { always, flatMap } from '../../utils/others'
import { TablePipeline } from '../pipeline'
@@ -100,7 +100,7 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
onChangeOpenKeys([...openKeys, rowKey], rowKey, 'expand')
}
}
-
+
// 还原primaryKey
const resetRow = (row:any)=>{
let key = row[originKeySymbol];
@@ -132,79 +132,79 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
return columns
}
const columnFlatCount = collectNodes(columns, 'leaf-only').length
- const [firstCol, ...others] = columns
-
- const render = (value: any, row: any, rowIndex: number) => {
- if (row[rowDetailMetaKey]) {
- return renderDetail(resetRow(row), rowIndex)
- }
-
- const content = internals.safeRender(firstCol, row, rowIndex)
- if (!hasDetail(row, rowIndex)) {
- return {content}
- }
+ return upDataFirstCol(columns, (firstCol) => {
- const rowKey = row[primaryKey]
- const expanded = openKeySet.has(rowKey)
- const onClick = (e: React.MouseEvent) => {
- if (opts.stopClickEventPropagation) {
- e.stopPropagation()
+ const render = (value: any, row: any, rowIndex: number) => {
+ if (row[rowDetailMetaKey]) {
+ return renderDetail(resetRow(row), rowIndex)
}
- toggle(rowKey)
- }
-
- const expandCls = expanded ? 'expanded' : 'collapsed'
- return (
-
-
- {content}
-
- )
- }
-
- const getCellProps = (value: any, row: any, rowIndex: number) => {
- if (row[rowDetailMetaKey]) {
- return {
- style: {
- '--cell-padding': '0',
- overflow: 'hidden',
- ...opts.detailCellStyle,
- } as any,
+
+ const content = internals.safeRender(firstCol, row, rowIndex)
+
+ if (!hasDetail(row, rowIndex)) {
+ return {content}
}
- }
-
- const prevProps = firstCol.getCellProps?.(value, row, rowIndex)
-
- if (!hasDetail(row, rowIndex)) {
- return prevProps
- }
-
- return mergeCellProps(prevProps, {
- onClick(e) {
+
+ const rowKey = row[primaryKey]
+ const expanded = openKeySet.has(rowKey)
+ const onClick = (e: React.MouseEvent) => {
if (opts.stopClickEventPropagation) {
e.stopPropagation()
}
- toggle(row[primaryKey])
- },
- style: { cursor: 'pointer' },
- })
- }
+ toggle(rowKey)
+ }
+
+ const expandCls = expanded ? 'expanded' : 'collapsed'
+ return (
+
+
+ {content}
+
+ )
+ }
+
+ const getCellProps = (value: any, row: any, rowIndex: number) => {
+ if (row[rowDetailMetaKey]) {
+ return {
+ style: {
+ '--cell-padding': '0',
+ overflow: 'hidden',
+ ...opts.detailCellStyle,
+ } as any,
+ }
+ }
+
+ const prevProps = firstCol.getCellProps?.(value, row, rowIndex)
+
+ if (!hasDetail(row, rowIndex)) {
+ return prevProps
+ }
+
+ return mergeCellProps(prevProps, {
+ onClick(e) {
+ if (opts.stopClickEventPropagation) {
+ e.stopPropagation()
+ }
+ toggle(row[primaryKey])
+ },
+ style: { cursor: 'pointer' },
+ })
+ }
- return [
- {
+ return {
...firstCol,
title: (
@@ -212,7 +212,6 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
),
render,
- // getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps,
getCellProps: (value: any, row: any, rowIndex: number)=>{
if (row[rowDetailMetaKey] || clickArea === 'cell') {
return getCellProps(value, row, rowIndex);
@@ -225,10 +224,9 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
// detail 总是成一行
return { top: rowIndex, bottom: rowIndex + 1, left: 0, right: columnFlatCount }
}
- },
- },
- ...others,
- ]
+ }
+ } as ArtColumn
+ })
}
}
}
diff --git a/packages/ali-react-table/src/pipeline/features/treeMode.tsx b/packages/ali-react-table/src/pipeline/features/treeMode.tsx
index 571e18214..749762548 100644
--- a/packages/ali-react-table/src/pipeline/features/treeMode.tsx
+++ b/packages/ali-react-table/src/pipeline/features/treeMode.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { ExpansionCell, icons, InlineFlexCell } from '../../common-views'
import { ArtColumn } from '../../interfaces'
import { internals } from '../../internals'
-import { isLeafNode as standardIsLeafNode, mergeCellProps } from '../../utils'
+import { isLeafNode as standardIsLeafNode, mergeCellProps, upDataFirstCol } from '../../utils'
import { TablePipeline } from '../pipeline'
export const treeMetaSymbol = Symbol('treeMetaSymbol')
@@ -110,91 +110,88 @@ export function treeMode(opts: TreeModeFeatureOptions = {}) {
if (columns.length === 0) {
return columns
}
- const [firstCol, ...others] = columns
-
- const render = (value: any, record: any, recordIndex: number) => {
- const content = internals.safeRender(firstCol, record, recordIndex)
- if (record[treeMetaKey] == null) {
- // 没有 treeMeta 信息的话,就返回原先的渲染结果
- return content
- }
-
- const { rowKey, depth, isLeaf, expanded } = record[treeMetaKey]
-
- const indent = iconIndent + depth * indentSize
-
- if (isLeaf) {
- return (
-
- {content}
-
- )
- }
-
- const onClick = (e: React.MouseEvent) => {
- if (stopClickEventPropagation) {
- e.stopPropagation()
+ // const [firstCol, ...others] = columns
+ return upDataFirstCol(columns, firstCol => {
+ const render = (value: any, record: any, recordIndex: number) => {
+ const content = internals.safeRender(firstCol, record, recordIndex)
+ if (record[treeMetaKey] == null) {
+ // 没有 treeMeta 信息的话,就返回原先的渲染结果
+ return content
}
- toggle(rowKey)
- }
-
- const expandCls = expanded ? 'expanded' : 'collapsed'
- return (
-
-
- {content}
-
- )
- }
-
- const getCellProps = (value: any, record: any, rowIndex: number) => {
- const prevProps = internals.safeGetCellProps(firstCol, record, rowIndex)
- if (record[treeMetaKey] == null) {
- // 没有 treeMeta 信息的话,就返回原先的 cellProps
- return prevProps
- }
-
- const { isLeaf, rowKey } = record[treeMetaKey]
- if (isLeaf) {
- return prevProps
- }
-
- return mergeCellProps(prevProps, {
- onClick(e) {
+
+ const { rowKey, depth, isLeaf, expanded } = record[treeMetaKey]
+
+ const indent = iconIndent + depth * indentSize
+
+ if (isLeaf) {
+ return (
+
+ {content}
+
+ )
+ }
+
+ const onClick = (e: React.MouseEvent) => {
if (stopClickEventPropagation) {
e.stopPropagation()
}
toggle(rowKey)
- },
- style: { cursor: 'pointer' },
- })
- }
-
- return [
- {
+ }
+
+ const expandCls = expanded ? 'expanded' : 'collapsed'
+ return (
+
+
+ {content}
+
+ )
+ }
+
+ const getCellProps = (value: any, record: any, rowIndex: number) => {
+ const prevProps = internals.safeGetCellProps(firstCol, record, rowIndex)
+ if (record[treeMetaKey] == null) {
+ // 没有 treeMeta 信息的话,就返回原先的 cellProps
+ return prevProps
+ }
+
+ const { isLeaf, rowKey } = record[treeMetaKey]
+ if (isLeaf) {
+ return prevProps
+ }
+
+ return mergeCellProps(prevProps, {
+ onClick(e) {
+ if (stopClickEventPropagation) {
+ e.stopPropagation()
+ }
+ toggle(rowKey)
+ },
+ style: { cursor: 'pointer' },
+ })
+ }
+ return {
...firstCol,
title: (
{internals.safeRenderHeader(firstCol)}
),
render,
getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps,
- },
- ...others,
- ]
+ }
+ })
}
}
}
diff --git a/packages/ali-react-table/src/utils/index.tsx b/packages/ali-react-table/src/utils/index.tsx
index 9170a80e2..41ea1a419 100644
--- a/packages/ali-react-table/src/utils/index.tsx
+++ b/packages/ali-react-table/src/utils/index.tsx
@@ -12,3 +12,4 @@ export { default as proto } from './proto'
export { default as makeRecursiveMapper } from './makeRecursiveMapper'
export { default as smartCompare } from './smartCompare'
export { default as traverseColumn } from './traverseColumn'
+export { default as upDataFirstCol } from './upDataFirstCol'
diff --git a/packages/ali-react-table/src/utils/upDataFirstCol.ts b/packages/ali-react-table/src/utils/upDataFirstCol.ts
new file mode 100644
index 000000000..7d4906720
--- /dev/null
+++ b/packages/ali-react-table/src/utils/upDataFirstCol.ts
@@ -0,0 +1,16 @@
+import { ArtColumn } from '../interfaces'
+/**
+ * 更新第一个叶子节点列配置
+ */
+export default function upDataFirstCol(columns: ArtColumn[], upFn:(firstCol:ArtColumn)=>ArtColumn):ArtColumn[]{
+ const [firstCol, ...others] = columns;
+ if(firstCol.children && firstCol.children.length){
+ firstCol.children = upDataFirstCol(firstCol.children, upFn)
+ return [...columns];
+ }else{
+ return [
+ upFn(firstCol),
+ ...others
+ ]
+ }
+}
\ No newline at end of file