如何在antd中使用Table的标准ExpandIcon

Question

我的项目中有一个 antd 表 antd 版本：4.25.15 反应：“^16.8.6” 看起来像这样：

<Table
    dataSource={data}
    columns={columnsForRender}
    expandable={expandable}
/>

可扩展道具：

const expandable = {
    expandIcon: ({ expanded, onExpand, record }) => {
      if (!record.children) {
        return null;
      }
      return expanded ? (
        <MinusOutlined className='ant-table-row-expand-icon' onClick={e => onExpand(record, e)} />
      ) : (
        <PlusOutlined className='ant-table-row-expand-icon' onClick={e => onExpand(record, e)} />
      );
    },
  };

但是这个按钮看起来不太标准。 我想使用表中的标准按钮 例子： 第一张照片 - 我的按钮 第二张照片 - 标准 antd 按钮 我不能使用这个 ExpandedRowRender 和 rowExpandable 因为这样会创建一个新列

我尝试使用不同的类，但不能使用展开和折叠的类 （也许我不知道怎么做）

Answer 1

const expandable = {
expandIcon: ({ expanded, onExpand, record }) => {
  if (!record.children) {
    return null;
  }
  const iconClassName = `ant-table-row-expand-icon ant-table-row-expand-icon-${
    expanded ? "expanded" : "collapsed"
  }`;
  return (
    <span className={iconClassName} onClick={(e) => onExpand(record, e)} />
  );
},

};

这对我有帮助:)