可以通过重写Antd的默认展开图标组件实现更改展开图标的效果。

代码示例：

1. 自定义展开图标组件 // expandIcon.js import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';

export const CustomExpandIcon = ({ expandable, expanded, onExpand, needIndentSpaced, record }) => { if (!expandable) { return null; } if (expanded) { return onExpand(record, e)} />; } else { return onExpand(record, e)} />; } };

2. 在Table中引入自定义展开图标组件 // table.js import React, { useState } from "react"; import { Table } from "antd";

import { CustomExpandIcon } from "./expandIcon";

const dataSource = [ { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park", children: [ { key: "11", name: "John Brown", age: 32, address: "New York No. 1 Lake Park", }, ], }, { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park", children: [ { key: "21", name: "Jim Green", age: 42, address: "London No. 1 Lake Park", }, ], } ];

const columns = [ { title: "Name", dataIndex: "name", key: "name" }, { title: "Age", dataIndex: "age", key: "age" }, { title: "Address", dataIndex: "address", key: "address" }, ];

const MyTable = () => { const [expandedRows, setExpandedRows] = useState([]);

const handleExpand = (expanded, record) => { setExpandedRows(exp