From 4a420cb7e9e850d7105daf6fff95e3b9c1ba7ea3 Mon Sep 17 00:00:00 2001 From: youluna Date: Wed, 10 Apr 2019 22:23:04 +0800 Subject: [PATCH] fix(Table): merge cell with GroupHeader GroupFooter, close #547 --- docs/table/demo/list.md | 125 +++++++++++++++++++++++++++++++++++----- src/table/base/row.jsx | 7 ++- src/table/list/row.jsx | 6 +- 3 files changed, 120 insertions(+), 18 deletions(-) diff --git a/docs/table/demo/list.md b/docs/table/demo/list.md index d3650e8e8a..fcd262da7e 100644 --- a/docs/table/demo/list.md +++ b/docs/table/demo/list.md @@ -18,42 +18,123 @@ Demo the Group list. import { Table, Button } from '@alifd/next'; const dataSource = [{ - price: 'US $2.45', - status: 0, + price: 'US $1', + status: 1, + parent: 'root', id: 1, product: [{ title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace', avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg' }], children: [{ - price: 'US $2.5', - status: 1, + price: 'US $1-1', + status: 11, id: 2, + parent: 0, + index: 0, product: [{ title: 'Free shipping women Casual dresses lady dress plus size 2014', avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' }] }, { - price: 'US $2.5', - status: 1, + price: 'US $1-2', + status: 12, id: 3, + parent: 0, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }, { + price: 'US $1-3', + status: 13, + id: 7, + parent: 0, product: [{ title: 'Free shipping women Casual dresses lady dress plus size 2014', avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' }] }] }, { - price: 'US $2.5', - status: 1, + price: 'US $3', + status: 3, + parent: 'root', + id: 3, + product: [{ + title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace', + avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg' + }], + children: [{ + price: 'US $3-1', + status: 31, + id: 31, + parent: 1, + index: 0, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }, { + price: 'US $3-2', + status: 32, + id: 32, + parent: 1, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }, { + price: 'US $3-3', + status: 33, + id: 33, + parent: 1, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }, { + price: 'US $3-4', + status: 34, + id: 34, + parent: 1, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }] + }, { + price: 'US $4', + status: 4, + parent: 'root', id: 4, product: [{ - title: 'Free shipping women Casual dresses lady dress plus size 2014', - avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace', + avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg' }], children: [{ - price: 'US $2.5', - status: 1, - id: 5, + price: 'US $4-1', + status: 31, + id: 31, + parent: 2, + index: 0, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }, { + price: 'US $4-2', + status: 32, + id: 32, + parent: 2, + product: [{ + title: 'Free shipping women Casual dresses lady dress plus size 2014', + avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' + }] + }, { + price: 'US $4-3', + status: 33, + id: 33, + parent: 2, product: [{ title: 'Free shipping women Casual dresses lady dress plus size 2014', avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg' @@ -88,6 +169,20 @@ const dataSource = [{ } }; +const getCellProps = (rowIndex, colIndex, dataIndex, record) => { + if (colIndex === 3 && record.index === 0 ) { + return { + rowSpan: dataSource[record.parent].children.length + }; + } + + if (colIndex === 4 && record.index === 0 ) { + return { + rowSpan: dataSource[record.parent].children.length + }; + } +} + class App extends React.Component { state = { hasSelection: false @@ -102,13 +197,13 @@ class App extends React.Component { return (

- +
- +
); diff --git a/src/table/base/row.jsx b/src/table/base/row.jsx index 51b6568ed8..aef06695e2 100644 --- a/src/table/base/row.jsx +++ b/src/table/base/row.jsx @@ -81,19 +81,22 @@ export default class Row extends React.Component { } } - renderCells(record) { + renderCells(record, rowIndex) { const { Cell, columns, getCellProps, cellRef, prefix, - rowIndex, primaryKey, pure, locale, rtl, } = this.props; + + // use params first, it's for list + rowIndex = rowIndex !== undefined ? rowIndex : this.props.rowIndex; + const { lockType } = this.context; return columns.map((child, colIndex) => { /* eslint-disable no-unused-vars, prefer-const */ diff --git a/src/table/list/row.jsx b/src/table/list/row.jsx index 0f7bd2c806..28d90704f2 100644 --- a/src/table/list/row.jsx +++ b/src/table/list/row.jsx @@ -38,6 +38,10 @@ export default class GroupListRow extends Row { [`${prefix}table-row`]: true, [className]: className, }); + + // clear notRenderCellIndex, incase of cached data + this.context.notRenderCellIndex = []; + return ( { - const cells = this.renderCells(child); + const cells = this.renderCells(child, index); if (this.isChildrenSelection()) { if (!child[primaryKey]) { log.warning(