feat: 增加getCellClassNameAPI支持自定义单元格样式

This commit is contained in:
izbz wh 2020-10-30 13:57:05 +08:00
parent 18863f483f
commit 05d175a94f
3 changed files with 12 additions and 3 deletions

View File

@ -576,7 +576,7 @@ class Table extends Component {
} }
getExpandedRow(key, content, visible, className, fixed) { getExpandedRow(key, content, visible, className, fixed) {
const { clsPrefix, expandIconAsCell,onPaste } = this.props; const { clsPrefix, expandIconAsCell,onPaste, getCellClassName } = this.props;
let colCount; let colCount;
if (fixed === 'left') { if (fixed === 'left') {
colCount = this.columnManager.leftLeafColumns().length; colCount = this.columnManager.leftLeafColumns().length;
@ -629,6 +629,7 @@ class Table extends Component {
onDragRow={this.onDragRow} onDragRow={this.onDragRow}
onDragRowStart={this.onDragRowStart} onDragRowStart={this.onDragRowStart}
height={expandedRowHeight} height={expandedRowHeight}
getCellClassName = {getCellClassName}
/> />
); );
} }
@ -850,6 +851,7 @@ class Table extends Component {
centerColumnsLength={this.centerColumnsLength} centerColumnsLength={this.centerColumnsLength}
leftColumnsLength={this.leftColumnsLength} leftColumnsLength={this.leftColumnsLength}
expandIconCellWidth={expandIconCellWidth} expandIconCellWidth={expandIconCellWidth}
getCellClassName = {props.getCellClassName}
/> />
); );
this.treeRowIndex++; this.treeRowIndex++;

View File

@ -191,7 +191,7 @@ class TableCell extends Component{
render() { render() {
const { record, indentSize, clsPrefix, indent, const { record, indentSize, clsPrefix, indent,
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props; index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex, getCellClassName} = this.props;
const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other } = column; const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other } = column;
let {className = ''} = column; let {className = ''} = column;
@ -297,6 +297,12 @@ class TableCell extends Component{
if(colMenu){ if(colMenu){
className += ' u-table-inline-icon' className += ' u-table-inline-icon'
} }
if(typeof getCellClassName == 'function') {
const selfClassName = getCellClassName(record, index, column) || ''
className += ` ${selfClassName}`
}
if(colSpan==0)return null; if(colSpan==0)return null;
return <td return <td
draggable={column.draggable} draggable={column.draggable}

View File

@ -462,7 +462,7 @@ class TableRow extends Component{
clsPrefix, columns, record, height, visible, index,onPaste, clsPrefix, columns, record, height, visible, index,onPaste,
expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble, expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth ,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth, getCellClassName
} = this.props; } = this.props;
const {notRowDrag} = this.state; const {notRowDrag} = this.state;
let showSum = false; let showSum = false;
@ -530,6 +530,7 @@ class TableRow extends Component{
onPaste={onPaste} onPaste={onPaste}
stopRowDrag={this.stopRowDrag} stopRowDrag={this.stopRowDrag}
col={i} col={i}
getCellClassName = {getCellClassName}
/> />
); );
} }