将开关/复选框与 Ant Design 表的标题一起放置 react js

Question

我是反应 js 的新手。所以我需要你的帮助。我想要一个带有表格标题的开关/复选框。在这个沙箱https://codesandbox.io/s/bold-curie-lyovv?file=/index.js中，底部开关必须带有表格的标题。我该如何移动它？

示例：| Name <switch /> | Age <switch /> | Address <switch /> |

谁能帮帮我？

Answer 1

确保您的列标题遵循以下结构：

title: <p>COLUMN_TITLE <Switch defaultChecked onChange={onChange} /></p>

见下文。

const columns = [
  {
    title: <p>Name <Switch defaultChecked onChange={onChange} /></p>,
    dataIndex: "name",
    key: "name",
    render: (text, record) => (
      <div>
        <Input
          disabled={val}
          component="input"
          className="ant-input"
          type="text"
        />
      </div>
    )
  },
  {
    title: <p>Age <Switch defaultChecked onChange={onChange} /></p>,
    dataIndex: "age",
    key: "age",
    render: (text, record) => (
      <div>
        <Input component="input" className="ant-input" type="text" />
       </div>
    )
  },
  {
    title: <p>Address <Switch defaultChecked onChange={onChange} /></p>,
    dataIndex: "address",
    key: "address",
    render: (text, record) => (
      <div>
        <Input component="input" className="ant-input" type="text" />
      </div>
    )
  }
];

这样，您的Switch 将包含在列标题旁边的表格标题中。以前，您将它包含在列的渲染中。查看更新后的沙盒here。