Antd：是否可以更改行展开图标

Question

默认值是：[+] 和 [-]。找不到将其更改为其他图标的方法。例如从 https://ant.design/components/icon/.

向右下方

我的用户非常挑剔。

谢谢！

Answer 1

找到了：

  .ant-table-row-expand-icon-cell {

    position: relative;

    .ant-table-row-collapsed:after {
      content : "\E61D";
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;

      right: 16px;
      top: 0;
      display: inline-block;
      transform: scale(0.66666667) rotate(0deg);
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      zoom: 1;
    }

    .ant-table-row-expanded:after {
      content : "\E61D";
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;

      right: 16px;
      top: 0;
      display: inline-block;
      transform: rotate(180deg) scale(0.75);
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      zoom: 1;
    }

Answer 2

对于以后来这里的人来说，正确的做法是使用 antd table 道具。

antd 的 expandIcon prop table 接受一个 returns 反应节点的函数。

customExpandIcon(props) {
    if (props.expanded) {
        return <a style={{ color: 'black' }} onClick={e => {
            props.onExpand(props.record, e);
        }}><Icon type="minus" /></a>
    } else {
        return <a style={{ color: 'black' }} onClick={e => {
            props.onExpand(props.record, e);
        }}><Icon type="plus" /></a>
    }
}

然后在你的table里面放：

<Table
    expandIcon={(props) => this.customExpandIcon(props)}
    ...
/>

这将允许您使用 antd 图标的任意组合来代替 antd 上的 expand/minimize 按钮 table。

使用 Antd 版本 3.14.1

有关更多信息，请查看此示例： Antd expandIcon example

希望对您有所帮助！

Answer 3

将 expandIcon 与 Antd 一起使用 Collapse 你想做的事情

  customExpandIcon=(props) =>{
    if (props.isActive) {
      return (
        <a
          style={{ color: "black" }}
          onClick={e => {
            props.onExpand(props.record, e);
          }}
        >
          <Icon type="minus" />
        </a>
      );
    } else {
      return (
        <a
          style={{ color: "black" }}
          onClick={e => {
            props.onExpand(props.record, e);
          }}
        >
          <Icon type="plus" />
        </a>
      );
    }
  }

然后添加道具 <Collapse expandIcon={(props) => this.customExpandIcon(props)}/>

Answer 4

使用 Antd Table,

在 Table 渲染器中：

 expandIcon={(props) => this.customExpandIcon(props)}

并将 customExpandIcons 实现为：

customExpandIcon(props) {
        if (props.expanded) {
            return <Button title="Close the row" type="primary" htmltype="submit" icon="close" onClick={e => {
                props.onExpand(props.record, e);

            }}>Close</Button>
        } else {

                return <Button title="Click to open" htmltype="submit" icon="history" >Show
                    History</Button>

        }
    }

Answer 5

https://codesandbox.io/s/fervent-bird-nuzpr?file=/index.js:70-107

 <Table
    columns={columns}
    dataSource={data}
    expandable={{
      expandedRowRender: record => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      expandIcon: ({ expanded, onExpand, record }) =>
        expanded ? (
          <MinusCircleTwoTone onClick={e => onExpand(record, e)} />
        ) : (
          <PlusCircleTwoTone onClick={e => onExpand(record, e)} />
        )
    }}
  />

Answer 6

对于 antd (v4) - 收起

组件：

expandIcon={(props) => this.customExpandIcon(props)}

函数：

customExpandIcon(props) {
    if (props.isActive) {
        return <a onClick={e => { props.onItemClick(props.panelKey)
        }}><Icon type="minus" /></a>
    } else {
        return <a onClick={e => { props.onItemClick(props.panelKey)
        }}><Icon type="plus" /></a>
    }
}

Answer 7

for antd version 3.6.x (for v3.1.x)

您可以自定义 css class .ant-table-row-expand-icon

.ant-table-row-expand-icon{
  height: 25px;
  width: 25px;
  font-size: 30px;
}

截图

antd版本4.x

您可以使用 expandIcon 属性调整图标大小或更改图标，增加 fontSize 以增加图标大小

<Table
    columns={columns}
    expandable={{
      expandedRowRender: (record) => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      rowExpandable: (record) => record.name !== 'Not Expandable',
      expandIcon: ({ expanded, onExpand, record }) =>
        expanded ? (
          <MinusOutlined
            style={{ fontSize: '20px' }}
            onClick={(e) => onExpand(record, e)}
          />
        ) : (
          <PlusOutlined
            style={{ fontSize: '20px' }}
            onClick={(e) => onExpand(record, e)}
          />
        ),
    }}
    dataSource={data}
  />

截图

Antd：是否可以更改行展开图标

Antd: Is it possible to change the row expand icon

antd

for antd version 3.6.x (for v3.1.x)

antd版本4.x