有没有办法让'expandRowByClick‘只在我点击Ant Design中行的某一部分时才可执行？

在Ant Design中，'expandRowByClick'是一个属性，用于控制行是否可以通过点击来展开或折叠。默认情况下，当你点击行的任何部分时，都会触发展开或折叠操作。

如果你只想在点击行的某一部分时才执行展开或折叠操作，你可以通过以下方式实现：

自定义行的渲染：你可以使用Ant Design提供的自定义渲染功能，将行的内容分为多个部分，并为每个部分添加点击事件。然后，你可以在点击事件中控制展开或折叠操作的执行。具体实现方式如下：

import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, record) => (
      <div>
        <span>{record.name}</span>
        <span onClick={() => handleExpand(record.id)}>Expand</span>
      </div>
    ),
  },
  // other columns
];

const handleExpand = (id) => {
  // 执行展开或折叠操作
};

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // other data
];

const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    expandable={{ expandRowByClick: false }}
  />
);

export default App;

在上述代码中，我们通过自定义渲染函数将行的内容分为两个部分：姓名和展开按钮。当点击展开按钮时，会调用handleExpand函数来执行展开或折叠操作。

使用自定义的展开图标：Ant Design的Table组件提供了expandIcon属性，可以用于自定义展开图标。你可以在展开图标上添加点击事件，并在事件中控制展开或折叠操作的执行。具体实现方式如下：

import { Table } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  // other columns
];

const expandedRowRender = (record) => {
  // 展开行的内容
};

const expandIcon = ({ expanded, onExpand, record }) => (
  <span onClick={() => handleExpand(record.id)}>
    {expanded ? <MinusOutlined /> : <PlusOutlined />}
  </span>
);

const handleExpand = (id) => {
  // 执行展开或折叠操作
};

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // other data
];

const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    expandable={{ expandedRowRender, expandIcon }}
  />
);

export default App;

在上述代码中，我们通过自定义expandIcon函数来渲染展开图标，并在图标上添加点击事件。当点击展开图标时，会调用handleExpand函数来执行展开或折叠操作。

通过以上两种方式，你可以实现只在点击行的某一部分时才执行展开或折叠操作。具体的实现方式取决于你的需求和项目的具体情况。