ANTD 表 getColumnSearchProps 因嵌套对象而损坏

Question

使用示例中的代码：https://ant.design/components/table/#components-table-demo-custom-filter-panel

getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
  <div style={{ padding: 8 }}>
    <Input
      ref={node => {
        this.searchInput = node;
      }}
      placeholder={`Search ${dataIndex}`}
      value={selectedKeys[0]}
      onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
      onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
      style={{ width: 188, marginBottom: 8, display: 'block' }}
    />
    <Space>
      <Button
        type="primary"
        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
        Reset
      </Button>
    </Space>
  </div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
  record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
  if (visible) {
    setTimeout(() => this.searchInput.select());
  }
},
render: text =>
  this.state.searchedColumn === dataIndex ? (
    <Highlighter
      highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
      searchWords={[this.state.searchText]}
      autoEscape
      textToHighlight={text.toString()}
    />
  ) : (
    text
  ),
});

Uncaught TypeError: Cannot read property 'toString' of undefined尝试在 ANTD 表中传递嵌套值时抛出错误：

<Table bordered size='small' dataSource={data} rowKey='_id'>
....
    <Column 
        title='Name' 
        dataIndex={['profile', 'name']}
        {...this.getColumnSearchProps(['profile', 'name'])}
      />
....
</Table>

以下是表data （dataSource）的结构：

[
    {_id: 'xxx1', profile : { name : 'username1' }, roles: ['xxx1']},
    {_id: 'xxx2', profile : { name : 'username2' }, roles: ['xxx2']}
]

根据文档中的概述：https ://ant.design/components/table/#Migrate-to-v4 ：

此外，重大更改是将 dataIndex 从嵌套字符串路径（如 ）更改user.age为字符串数组路径（如 ）['user', 'age']。这有助于解决开发人员应该在包含..

因此dataIndex={['profile', 'name']}，但这与 的情况不同getColumnSearchProps。

有人可以帮忙吗？

Answer 1

由于 dataIndex 现在可能是一个数组，因此您也需要处理这种情况。

下面提供了一个示例：

你基本上必须

1. 代替

   record[dataIndex]
   

   和

   get(record, dataIndex) // import get from "lodash.get";
   

2. 和

   this.state.searchedColumn === dataIndex
   

   和

   isequal(this.state.searchedColumn, dataIndex) // import isequal from "lodash.isequal";