如何通过单击一个按钮来扩展ANTD表行

Question

版本3.0.3

环境PC，Chrome

繁殖链接https://codesandbox.io/s/my02ok19wy

繁殖的步骤现在，表可以通过两种方式扩展行：

1. 在第一列中使用图标
2. 使用ExpandRowbyClick作为true单击整个行。

但这不是我想要的。我想在其他列中使用该按钮，也许是按钮Show More。然后，当我单击Show More时，该行将展开。如何意识到这一点？

像演示显示一样，我想通过单击Show More扩展行，而不是单击第一个单元格中的按钮。谢谢

期望什么？通过单击第一个单元格中的一个按钮扩展一行

实际发生了什么？必须单击行第一个单元格中的按钮。该按钮无法移动到其他单元格。

Answer 1

可能是可能的，但我不愿意为您执行代码，但我会解释如何。

有一个道具调用expandedRowKeys，您可以在其中指定要扩展的行的键。

所以将expandedRowKeys={[1,3]}添加到<Table />将展开第一行和第三行。

现在，您只需要实现handleClickMore功能即可操纵行键。以及

之类的东西

expandedRowKeys={this.state.expandedKeys}

Answer 2

您可以将expandIcon和expandedRowRender用于目的
这是修改的代码：

import React from "react";
import ReactDOM from "react-dom";
import { version, Table, Button } from "antd";
import "antd/dist/antd.css";
const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" },
  { title: "Action", dataIndex: "", key: "expand" }
];
const data = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    key: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    key: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];
ReactDOM.render(
  <div style={{ margin: 24 }}>
    <p style={{ marginBottom: 24 }}>
      Current antd version: {version} <br />
      You can change antd version on the left panel (Dependencies section).
    </p>
    <Table
      // expandIconColumnIndex={3}
      columns={columns}
      expandedRowRender={(record) => (
        <p style={{ margin: 0 }}>{record.description}</p>
      )}
      dataSource={data}
      expandIcon={({ expanded, onExpand, record }) =>
        expanded ? (
          <Button
            onClick={(e) => onExpand(record, e)}
          >
            Collapse
          </Button>
        ) : (
          <Button onClick={(e) => onExpand(record, e)}>Expand</Button>
        )
      }
    />
  </div>,
  document.getElementById("root")
);