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 }}
          />

实例展示

posted on 2023-01-31 10:51  imi小码娜  阅读(157)  评论(0)    收藏  举报

导航