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桌子道具。

antd表的expandIcon属性带有返回反应节点的函数。

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
    expandIcon={(props) => this.customExpandIcon(props)}
    ...
/>

这将允许您使用antd中的图标组合来代替antd表中的展开/最小化按钮。

使用Antd版本3.14.1

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

希望这会有所帮助！

Answer 3

在您要使用的Antd Collapse中使用expandIcon

  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表

在表格渲染器内：

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

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

5 个答案: