ANTD Table 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
  ),
});

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

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

下面是 data (dataSource) 的结构如何为 table:

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

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

Besides, the breaking change is changing dataIndex from nest string path like user.age to string array path like ['user', 'age']. This help to resolve developer should additional work on the field which contains ..

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

有人可以帮忙吗？

Answer 1

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

示例如下：

你基本上必须

替换

record[dataIndex]

和

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

和

this.state.searchedColumn === dataIndex

和

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

ANTD Table getColumnSearchProps 被嵌套对象破坏

ANTD Table getColumnSearchProps broken with nested object

javascript

meteor

reactjs

antd