将thead行添加到Antd表组件

Question

我想在Antd表组件中添加另一行，所以它看起来像这样：

我无法将该行添加为<tbody>行，因为它将被过滤并与其余数据进行排序。我希望它成为表数据的外部部分。

将输入放在已经存在的<th>单元中并不是令人满意的解决方案，因为我需要大量修改CSS才能使其正常工作，并在此过程中释放一些LESS变量。

这是我目前的尝试，在第一个thead > th

中包含表单元素

要仅将背景保留在表单行中，我需要将其与第一个（也是唯一一个）thead的<tr>元素分开，使其成为自己的“自定义”行。

有人知道如何使用Antd <Table>来实现此设计吗？

---

我希望最终结果看起来像这样：（通过 inspector 修改）

Answer 1

第一个解决方案

一个包装器组件，它管理两个Tables的状态：

1. 输入表只有一行。
2. 没有标题的数据表。

function TableWrapper() {
  ...
  return (
    <Flexbox>
      <Table
        size="medium"
        rowSelection={rowSelection}
        columns={columnsInput}
        dataSource={[{}]}
        pagination={false}
      />
      <Table
        size="medium"
        showHeader={false}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
      />
      <Button onClick={handleAdd} type="primary" style={{ margin: '3%' }}>
        Add a row
      </Button>
    </Flexbox>
  );
}

由包装程序完成的排序，您至少需要两项，因此可以称为：dataSource={[{},{}]}

// columnsInput
    {
      title: 'Age',
      dataIndex: 'age',
      render: () => <Input />,
      sort: () => // setDataSource...
    }

第二个解决方案

在提供给dataSource的{​​{1}}值中，添加前端模拟项，然后相应地呈现行，例如：

Table

然后行渲染：

const initial = {
  key: 'initial',
  name: 'initial',
  age: 'initial',
  address: 'initial'
};

结果：

在下一个组件中：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: value => (value === 'initial' ? <Input /> : value)
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: value => (value === 'initial' ? <Input /> : value),
    sorter: (a, b) => a.age - b.age
  },
  {
    title: 'Address',
    dataIndex: 'address',
    render: value => (value === 'initial' ? <Input /> : value)
  },
  {
    title: '',
    dataIndex: 'action',
    width: '50px',
    render: (_, record) => (
      <>
        {record.name === 'initial' && <Button icon="plus" shape="circle" />}
        {record.name !== 'initial' && (
          <Button icon="delete" shape="circle" type="danger" />
        )}
      </>
    )
  }
];

排序没有开销，只需在表列中添加function TweakedTable() { const [dataSource, setDataSource] = useState([makeRow(0)]); const [counter, setCounter] = useState(1); const handleAdd = () => { setDataSource([...dataSource, makeRow(counter)]); setCounter(prev => prev + 1); }; return ( <Flexbox> <Table size="small" rowSelection={rowSelection} columns={columns} dataSource={[initial, ...dataSource]} /> <Button onClick={handleAdd} type="primary" style={{ margin: '3%' }}> Add a row </Button> </Flexbox> ); } 。

此外，您的sorter已从第一行解耦。

  

注意：我没有在演示中进行任何状态管理，我确定您将能够处理它，而且如果您想删除已禁用的dataSource，则不应使用{{1} }，并在每行上呈现Checkbox并由您自己管理。