ant design 树形表格 自定义图标
## 配置自定义树形结构图标按钮
```js
const columns = [
{
title: '',
dataIndex: 'index',
width: 40,
render: (_val, _record, index) => {
const num =
pagination.current === 1
? index + 1
: pagination.current === 2
? index + 1 + pagination.pageSize
: index + 1 + pagination.pageSize * (pagination.current - 1);
return <a style={{ cursor: 'initial' }}>{num}</a>;
},
},
{
title: '客户单位',
dataIndex: 'organization',
width: 110,
render: value => (
<Ellipsis tooltip lines={1}>
<div>{value}</div>
</Ellipsis>
),
},
{
title: '服务日期',
dataIndex: 'visit_date',
width: 90,
render: val => val && val.substring(0, 10),
},
];
// 子级分类
const twoColumns = [
{
title: '需求简述',
dataIndex: 'brief',
width: 100,
},
{
title: '需求详述',
dataIndex: 'description',
width: 100,
},
{
title: '解决思路',
dataIndex: 'answer',
width: 90,
},
];
expandedRowRender方法 额外的展开行
const expandedRowRender = record => {
return (
<div className={styles.twoTable}>
<Table
columns={twoColumns}
dataSource={record.demand_records.length > 0 ? record.demand_records : ''}
style={{ background: '#fff' }}
size="small"
rowKey="report_id"
pagination={false}
/>
</div>
);
};
嵌套table 树形结构 自定义图标配置 若子结构数据存在则展示,否则 不展示 +(-) 图标
// 嵌套table 树形结构 自定义图标配置
const customExpandIcon = props => {
if (props.record.demand_records.length > 0) { // 如果存在子结构数据
if (props.expanded === false) {
return (
<a
onClick={e => {
props.onExpand(props.record, e);
}}
>
<Icon type="plus" style={{ fontSize: 11 }} />
</a>
);
} else {
return (
<a
onClick={e => {
props.onExpand(props.record, e);
}}
>
<Icon type="minus" style={{ fontSize: 11 }} />
</a>
);
}
}
};
<Table
className="components-table-demo-nested"
columns={columns}
expandedRowRender={expandedRowRender} // 额外的展开行
dataSource={newData.list}
expandIcon={props => customExpandIcon(props)} // 嵌套table自定义图标配置
rowKey={(record, index) => {
return index;
}}
size="small"
pagination={{
defaultPageSize: newData.pagination.pageSize,
defaultCurrent: newData.pagination.current,
total: newData.pagination.total,
showSizeChanger: true,
showQuickJumper: true,
}}
onChange={this.handleTableChange}
loading={boardType === '客户看板' ? customerLoading : projectLoading}
// expandedRowKeys={data.list.map(i =>i.from_id )}
// defaultExpandAllRows={data.list.map(i =>i.from_id )}
scroll={{ y: 400, x: 865 }}
/>
实例展示

浙公网安备 33010602011771号